Могу ли я использовать .delay() вместе с .animate() в jQuery?

У меня есть этот код, который слайд открывает предварительный просмотр корзины на веб-сайте, над которым я работаю. Он остается открытым, если пользователь зависает на нем, но я хочу, чтобы у него была задержка на две секунды до того, как будет вызван обратный вызов для моего наведения. Это на всякий случай, если пользователь не захочет, чтобы мышка покинула область корзины.

Ниже приведен код, который я использую для анимации корзины:

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

Вот код, который я пытался использовать, но не влиял:

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

Ответ 1

Я всегда управлял такими вещами с помощью функций core setTimeout и clearTimeout js.

Вот пример на jsFiddle

Взгляните на jquery.hoverIntent plugin, он дает вам тайм-аут при наведении и отключении событий

Ответ 2

Если вы добавите остановку до задержки, она будет работать нормально:

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

Ответ 3

Похоже, что с 2011 года в jQuery могут быть обновления jQuery. В Chrome я могу использовать этот вызов без ожидания:

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

Ответ 4

Как долго вы хотите, чтобы он задерживался?

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