Animate an Image after hovering an item a second

Question

Hey, after some tries to get this to work, i ask you, if you know where my mistake is.

This is my code until now:

$(".menu a").hover( function () {
  $(this).data('timeout', setTimeout( function () {
        $(this).hover(function() {
            $(this).next("em").animate({opacity: "show", top: "-65"}, "slow");  
        }, function() {
            $(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
        });
  }, 1000));
}, function () {

  clearTimeout($(this).data('timeout'));

});

i would be happy about some help.

Answer 1

Inside the setTimeout callback, this does not refer to the hovered element.

To fix this, you need to make a separate variable in the event handler, like this: (pun intended)

$(".menu a").hover( function () {
    var me = $(this);

    me.data('timeout', setTimeout( function () {
        me.hover(function() {
            me.next("em").animate({opacity: "show", top: "-65"}, "slow");  
        }, function() {
            me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
        });
  }, 1000));
}, function () {    
    clearTimeout($(this).data('timeout'));
});

You don't need to use me inside the inner hover handlers, but you might as well.

Answer 2

thank you for the answer. I tried it but it doesn't work. one more information perhaps it will make it more clear. i had the function like this before:

$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");  
}, function() {
    $(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});

it worked but so it will be viewed imidiately. so i found this to set a timer that it show the popup only after in this example one second:

$("#hello").hover( function () {
  $(this).data('timeout', setTimeout( function () {
    alert('You have been hovering this element for 1000ms');
  }, 1000));
}, function () {
  clearTimeout($(this).data('timeout'));
});

both worked it self but if i put them together it does nothing

Answer 3

Theres a nice plugin that does this: hoverIntent. Replace .hover with .hoverIntent, and you wont have to deal with setting and clearing the timeout manually.