JQuery 链接操作有效……但是 CSS 不等待轮到它了?

发布于 2024-12-01 04:35:30 字数 515 浏览 1 评论 0原文

所以我有类似的东西(如下),一切都按顺序进行(它在开始时隐藏,然后你看到它向下滑动,等待 2 秒,然后向上滑动),但 .css 操作立即发生,即使它是在之后2秒延迟。只是想知道这是为什么。

$('p:first')
   .hide()
   .slideDown('slow')
   .delay(2000)
   .css({"background-color":"#ff4"})
   .slideUp('slow')
});

编辑新代码:我已将代码更改为:它似乎不再向上滑动..(因为我希望它在向上滑动之前更改为黄色)

   $('p:first')
.hide()
.slideDown('slow')
.delay(2000, function(){
                $(this).css({"background-color": "#ff4"})
                })
.slideUp('slow')
});

so i have something like so (below), everything works in turn (it's hidden at the start, then you see it slide down, waits 2 seconds, and slides back up) but the .css action takes place immediately, even though it's after the 2 second delay. Just wondering why this is.

$('p:first')
   .hide()
   .slideDown('slow')
   .delay(2000)
   .css({"background-color":"#ff4"})
   .slideUp('slow')
});

EDIT NEW CODE: I have changed my code to this: which doesn't seem to slideUp anymore.. (as I want it to change to yellow right before sliding up)

   $('p:first')
.hide()
.slideDown('slow')
.delay(2000, function(){
                $(this).css({"background-color": "#ff4"})
                })
.slideUp('slow')
});

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

画骨成沙 2024-12-08 04:35:30

这是因为 delay() 只影响动画队列。前一个调用返回后,方法链就会发生,因此 css() (这不是动画)最终被叫得太早了。

您可以将回调函数传递给 slideUp(),当动画完成时它将被调用:

$("p:first").hide()
            .slideDown("slow")
            .delay(2000)
            .slideUp("slow", function() {
                $(this).css("background-color", "#ff4");
            });

编辑:您试图在第二个代码片段中将回调传递给delay(),但该方法并不正式支持这样的参数(它仍然会被调用,不过,这很有趣)。但是,正如您所看到的,这样做会破坏动画回调链,因为永远不会调用 slideUp()

在这种情况下,您可以使用适当命名的 queue()dequeue() 方法:

$("p:first").hide()
            .slideDown("slow")
            .delay(2000)
            .queue(function() {
                $(this).css("background-color", "#ff4")
                       .dequeue();
            }).slideUp("slow");

That's because delay() only affects the animation queue. Method chaining occurs as soon as the previous call returns, so css() (which is not an animation) ends up being called too soon.

You can pass a callback function to slideUp(), and it will be called when the animation is complete:

$("p:first").hide()
            .slideDown("slow")
            .delay(2000)
            .slideUp("slow", function() {
                $(this).css("background-color", "#ff4");
            });

EDIT: You're trying to pass a callback to delay() in your second code snippet, but that method does not officially support such an argument (it still gets called, though, which is interesting). However, doing that breaks the animation callback chain, as you can see, since slideUp() is never called.

In this situation, you can inject your own function in the animation queue, using the aptly-named queue() and dequeue() methods:

$("p:first").hide()
            .slideDown("slow")
            .delay(2000)
            .queue(function() {
                $(this).css("background-color", "#ff4")
                       .dequeue();
            }).slideUp("slow");
秋叶绚丽 2024-12-08 04:35:30

“.css()”调用是同步操作,但其他所有都是动画。动画函数在排队操作后立即返回以供稍后使用。

我认为有一种方法可以将您自己的代码放入动画队列中,但我不会输入猜测;我将快速检查一下文档。

编辑 - 好吧,你要做的是这样的:

$('p:first')
   .hide()
   .slideDown('slow')
   .delay(2000)
   .queue(function(next) 
     $(this).css({"background-color":"#ff4"});
     next();
   })
   .slideUp('slow')
});

似乎像其他人建议的那样使用回调也应该有效。

The ".css()" call is a synchronous operation, but all the others are animations. The animation functions all return immediately after queueing up the operation for later.

There's a way to queue up your own code in the animation queue, I think, but I won't type in a guess; I'll make a quick check of the documentation.

edit — ok what you'd do is this:

$('p:first')
   .hide()
   .slideDown('slow')
   .delay(2000)
   .queue(function(next) 
     $(this).css({"background-color":"#ff4"});
     next();
   })
   .slideUp('slow')
});

Seems like using the callbacks as others suggested should work too.

向地狱狂奔 2024-12-08 04:35:30

修改回调中的css

$('p:first')
   .hide()
   .slideDown('slow')
   .delay(2000)
   .slideUp('slow',function(){
       $(this).css({backgroundColor:"#ff4"})
   })

Change the css in the callback

$('p:first')
   .hide()
   .slideDown('slow')
   .delay(2000)
   .slideUp('slow',function(){
       $(this).css({backgroundColor:"#ff4"})
   })
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文