jQuery 动画延迟不起作用

发布于 2024-12-06 06:51:08 字数 384 浏览 0 评论 0原文

当用户将鼠标悬停在 div 上时，我正在为 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。

原文

I am animating a div when a user hovers over and just wanted a bit of a delay on it but it doesn't seem to add the delay in, is there something i'm doing wrong?

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

Thanks, J.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

謸气贵蔟 2024-12-13 06:51:08

我认为问题是 queue: false; 通常你的动画会排队，但你让 animate-function 立即进行动画处理。

也许这会满足您的需求：

$("#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 });
});

I think the problem is queue: false; Usally your animation get queued, but you let the animate-function animate immediately.

Maybe this will do what you propably need:

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

for your 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 });
});

回复收藏 0 原文

少年亿悲伤 2024-12-13 06:51:08

.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/

.delay() delays an animation queue

since you put queue: false in your animation options, it is executed immediately.

use it like this and it will be fixed

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

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

working example:
http://jsfiddle.net/hxfGg/

回复收藏 0 原文

森林散布 2024-12-13 06:51:08

我同意 Snicksie 的观点，但是，对于您当前的代码情况，有一个更好的方法：

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

^{[ 查看输出]}

I agree with Snicksie, however, for your current case of code, there is a better approach:

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

^{[ View output ]}

回复收藏 0 原文

~没有更多了~