Question

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.

---

I tried this 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 1

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.