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

Question

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

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

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

Answer 1

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

$('.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 2

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

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

Answer 3

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

Вот пример для jsFiddle

Взгляните также на плагин jquery.hoverIntent , он дает вам тайм-аут на события hover и out

Answer 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 
    });