CODEWITHSUNDEEP
jqueryvariablesif-statementhoverfade
Alfazo
Alfazo

Reputation: 73

jquery show div only on first hover

I'm trying to create a div with the class 'popup' which will fade in for five seconds and then fade out when 'left' is hovered on, but only on the first time of hovering. This is my code so far…

$(document).ready(function() {
var i = 1;
if (i == 1) {
    $('.left').hover(function() {
    $('.popup').fadeIn(1000); 
    }, 
    function() {
        $('.popup').fadeOut(1000);  
    });
    i++; 
}; 
});

Upvotes: 2

Views: 2359

Answers (3)

irfanmcsd
irfanmcsd

Reputation: 6561

You can do it by this way. here is sample code.

$(document).ready(function() {
  var i=1;
  $('.left').on({
        mouseenter: function (e) {
             if(i<2)
             {
              $('.popup').fadeIn(1000); 
                 i++;
             }
        },
        mouseleave: function (e) {
            $('.popup').fadeOut(1000);  
        }
    });

});​

Sample Demo

http://jsfiddle.net/mediasoftpro/ZtWru/7/

Upvotes: 0

Taha Paksu
Taha Paksu

Reputation: 15616

If you want this to apply all .left elements once, you can use it's .data() property like this:

$(document).ready(function() {     
    $('.left').hover(function() {
        if ($(this).hasData("hovered_once")==false) {
            $('.popup').fadeIn(1000); 
            $(this).data("hovered_once")=="yes";
        }
    }, 
    function() {
        $('.popup').fadeOut(1000);  
    });
});

Upvotes: 0

gdoron
gdoron

Reputation: 150253

$('.left').one('mouseenter', function() {
    $('.popup').fadeIn(1000); 
})
.one('mouseleave', function() {
    $('.popup').fadeOut(1000);  
});

Upvotes: 3

Related Questions