如何在mouseleave上淡出此淡入淡出？

Question

I want to be able to fade out the div that just got faded in, but I can't get it to work. I have the following code:

    $(document).ready(function() {
        $('.upgrade').mouseenter(function() {
            var modal = $(this).data('modal');
            // alert(modal);
            $('.' + modal).fadeIn(200);
        }).mouseleave(function() {
            $('.' + modal).stop().fadeOut(200);
        });
    });

    <div class="upgrade" id="upgrade-1" data-modal="bonus">
       <!-- text -->
    </div>

   <div class="bonus">
      <!-- bonus product text -->
   </div>

Answer 1

You need to delcare modal outside mouseenter function

$(document).ready(function() {
     var modal="";//declare here
    $('.upgrade').mouseenter(function() {
         modal = $(this).data('modal');
        $('.' + modal).fadeIn(200);
    }).mouseleave(function() {
        $('.' + modal).stop().fadeOut(200);
    });
});

DEMO

Answer 2

I assume the mistake is not defining modal in the mouseleave event.

Try

 $(document).ready(function() {
        $('.upgrade').mouseenter(function() {
            var modal = $(this).data('modal');
            // alert(modal);
            $('.' + modal).fadeIn(200);
        }).mouseleave(function() {
            var modal = $(this).data('modal');
            $('.' + modal).stop().fadeOut(200);
        });
    });