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