javascript – JQuery链接动作,工作..但CSS不等待轮到你了？

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

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

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

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

编辑：您正试图在第二个代码片段中将回调传递给delay(),但该方法并不正式支持这样的参数(尽管如此,它仍会被调用,这很有趣).但是,正如您所见,这样做会破坏动画回调链,因为从不调用slideUp().

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

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

原文地址：https://www.jb51.cc/jquery/428552.html