使用jQuery更改CSS与延迟

Question

属性如何使用jQuery的与延迟改变HTML元素的CSS 属性。

想象一下这种情况。我有div与bg color蓝色。我希望它淡出，当它淡入，我想bg color是红色的。

我试过了。

$("div").fadeOut().delay(500).css("background-color","red").fadeIn(); 

虽然淡出格已经改变了颜色以红色它消失之前，它不遵循链的事件序列。我怎样才能使这一切发生在一条线上。

Answer 1

你可以使用任何功能参与动画队列queue function：

$("div") 
    .fadeOut() 
    .delay(500) 
    .queue(function() { 
     $(this).css("background-color","red").dequeue(); 
    }) 
    .fadeIn(); 

注意回调中的dequeue通话，这就是告诉jQuery来继续在队列中的下一件事。

Answer 2

$("div").fadeOut(500, function() { 
    $("div").css("background-color","red").fadeIn() 
});