Question

所以我有类似的东西（下图），一切都依次工作（它在开始时隐藏，然后你看到它向下滑动，等待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')
});

Answer 1

那是因为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");

Answer 2

“.css（）”调用是同步操作，但所有其他操作都是动画。动画函数在排队操作后立即返回。

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

编辑 - 好的，你要做的就是这个：

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

似乎使用回调，因为其他建议也应该有效。

Answer 3

更改回调中的css

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

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

3 个答案: