JQuery链接动作，作品.但是CSS不会等着轮到它了

JQuery chaining actions, works..but CSS doesn't wait it's turn?

本文关键字：CSS 链接 但是 作品 JQuery      更新时间：2023-09-26

所以我有这样的东西(下图)，一切都是依次工作的(它在开始时隐藏，然后你看到它向下滑动，等待2秒，然后向上滑动)，但是。css动作立即发生，即使它是在2秒延迟之后。只是想知道为什么会这样。

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

EDIT NEW CODE:我已经将我的代码更改为:这似乎不再滑起了。(因为我想让它在向上滑动之前变成黄色)

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

这是因为delay()只影响动画队列。方法链接在前一个调用返回时立即发生，因此css()(它不是动画)最终被过早调用。

你可以给slideUp()传递一个回调函数，它将在动画完成时被调用:

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

EDIT:您试图在第二个代码片段中传递回调给delay()，但是该方法并不正式支持这样的参数(尽管它仍然被调用，这很有趣)。然而，这样做会破坏动画回调链，因为slideUp()从未被调用。

在这种情况下，你可以在动画队列中注入你自己的函数，使用适当命名的queue()和dequeue()方法:

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

".css()"调用是一个同步操作，但所有其他的都是动画。动画函数都在将操作排队后立即返回。

有一种方法可以让你自己的代码在动画队列中排队，我想，但我不会输入猜测;我要快速检查一下文件。

编辑本;你要做的是:

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

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

修改回调中的css 

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