19

I have this code, which slides open a basket preview on a website I am working on. It stays open if the user is hovered on it, but I want it to have a two second delay before the callback for my hover is triggered. This is just in case the user didn't want the mouse to leave the basket area.

Below is the code I am using to animate the basket:

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").stop().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').stop().animate({top: -cartHeight},{duration:500})
});

Here is the code I tried to use, but had no affect:

$('.cart_button, .cart_module').hover(function(){
    $(".cart_module").delay().animate({top:'39px'},{duration:500});
}, function(){
    $('.cart_module').delay().animate({top: -cartHeight},{duration:500})
});
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sabai
  • 1,579
  • 5
  • 24
  • 40
  • Version 1.4.2. Nothing happened, there was just no delay, I'll add the code I tried to use to my question. – Sabai Nov 22 '10 at 16:42
  • 1
    Possible duplicate...http://stackoverflow.com/questions/1089246/jquery-how-to-tell-hover-to-wait – Aaron McIver Nov 22 '10 at 16:43

4 Answers4

28

If you add the stop before the delay it works just fine:

$('.cart_button, .cart_module').hover(function() {
    $('.cart_module').stop(true, true).delay(100).animate({top:'39px'}, 400);
  },
  function() {
    $('.cart_module').stop(true, true).animate({top: -cartHeight}, 250);
});
Chango
  • 6,754
  • 1
  • 28
  • 37
7

Looks like there may have been updates to jQuery in this vein since 2011. In Chrome I can use this sans timeout calls:

$('.thing').hover(function(){
    $(".thing").delay(2000).animate({top:'39px'},{duration:500});
}
cbmtrx
  • 591
  • 8
  • 16
3

I've always managed this kind of things with the help of core setTimeout and clearTimeout js functions.

Here is an example on jsFiddle

Take a look at jquery.hoverIntent plugin too, it gives you a timeout on hover and out events

gpasci
  • 1,420
  • 11
  • 16
3

How long do you want it to delay for????

$('.cart_button, .cart_module').hover(function(){
            $(".cart_module").delay(2000).animate({top:'39px'},{duration:500}); //two seconds
        }, function(){
            $('.cart_module').delay(2000).animate({top: -cartHeight},{duration:500}) //two seconds 
    });
switz
  • 24,384
  • 25
  • 76
  • 101
  • I forgot to put the time for the delay in, but setting a time still makes no difference. – Sabai Nov 23 '10 at 09:02