CODEWITHSUNDEEP
javascriptjquery
Dueify
Dueify

Reputation: 157

How do I fade out this fade on mouseleave?

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>

Upvotes: 1

Views: 145

Answers (2)

secelite
secelite

Reputation: 1373

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);
        });
    });

Upvotes: 1

Anton
Anton

Reputation: 32591

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

Upvotes: 1

Related Questions