Question

当用户徘徊时，我正在制作一个div，只是想要一点延迟，但它似乎没有添加延迟，是否有什么我做错了？

$(".carousel-desc").mouseenter(function () {
    $(this).delay(1000).animate({ 'height': '180px' }, { queue: false, duration: 600 });
});

$(".carousel-desc").mouseleave(function () {
    $(this).delay(1000).animate({ 'height': '40px' }, { queue: false, duration: 600 });
});

谢谢，J。

Answer 1

我认为问题是queue: false;通常你的动画会排队，但你会让动画功能立即生效。

也许这会做你可能需要的事情：

$("#element").mouseEnter(function(){
   $("#element").clearQueue();
   //other stuff
}

你的东西：

$(".carousel-desc").mouseenter(function () {
    $(this).clearQueue();
    $(this).delay(1000).animate({ 'height': '180px' }, { duration: 600 });
});

$(".carousel-desc").mouseleave(function () {
    $(this).clearQueue();
    $(this).delay(1000).animate({ 'height': '40px' }, { duration: 600 });
});

Answer 2

.delay()延迟动画队列

因为您将queue: false放在动画选项中，所以会立即执行。

像这样使用它将被修复

$(".carousel-desc").mouseenter(function () {
    $(this).delay(1000).animate({ 'height': '180px' }, { duration: 600 });
});

$(".carousel-desc").mouseleave(function () {
    $(this).delay(1000).animate({ 'height': '40px' }, { duration: 600 });
});

工作示例： http://jsfiddle.net/hxfGg/

Answer 3

我同意Snicksie的观点，对于您目前的代码案例，有一种更好的方法：

$('.carousel-desc').hover(function () {
    $(this).delay(1000).animate({
        'height': '180px'
    }, 600);
}, function () {
    $(this).delay(1000).animate({
         'height': '40px'
     }, 600);
});

^{[View output]}

jQuery动画延迟无法正常工作

3 个答案: