¿Puedo usar .delay() junto con .animate() en jQuery?

Question

Tengo este código, que abre una vista previa de la cesta en un sitio web en el que estoy trabajando. Permanece abierto si el usuario está sobre él, pero quiero que tenga un retraso de dos segundos antes de que se active la devolución de llamada para mi vuelo estacionario. Esto es solo en caso de que el usuario no quiera que el mouse abandone el área de la cesta.

A continuación se muestra el código que estoy utilizando para animar la cesta:

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

Aquí está el código Traté de usar, pero no tuvo ningún efecto:

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

Answer 1

Siempre he conseguido este tipo de cosas con la ayuda de las funciones de núcleo setTimeout y clearTimeout js.

Aquí es un example on jsFiddle

Tome un vistazo a jquery.hoverIntent plugin también, que le da un tiempo de espera en vuelo estacionario y fuera eventos

Answer 2

¿Cuánto tiempo usted quiere que aplazar por ????

$('.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 
    }); 

Answer 3

Si se agrega la parada antes de que el retraso funciona muy bien:

$('.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); 
}); 

Answer 4

Parece que puede haber habido cambios a jQuery en esta línea desde 2011. En Chrome puedo usar esta sans tiempo de espera llamadas:

$('.thing').hover(function(){ 
    $(".thing").delay(2000).animate({top:'39px'},{duration:500}); 
}