为什么此jQuery不先将文本更改为红色，然后再将其变为蓝色？

Question

我有下面的jquery，当我页面的一部分被点击时会触发它。

$('#my_link').css("color", "red").delay(500).fadeOut(500).css("color", "blue").fadeIn(500)

我可以看到大多数动画都像fadeOut和fadeIn一样发生，但我从来没有看到文本变成红色。我只看到它变蓝了。知道为什么吗？

Answer 1

应该是这样的：

$('#my_link').css("color", "red").delay(500).fadeOut(500, function(){
   $(this).css("color", "blue").fadeIn(500);
});

希望这能有所帮助。干杯

Answer 2

函数的执行顺序为

css red --> css blue --> fadeOut --> delay --> fadeIn

http://jsfiddle.net/dXSga/

.delay()方法允许我们延迟队列中它后面的函数的执行。这将不会延迟不使用效果队列的.show()或.hide()的无参数形式。

简而言之，.delay()不会延迟不使用jQuery effect的css()。

Answer 3

我相信下面的方法将会奏效。据我所知，使用jQuery的链接不会将属性与动画效果链接起来。我可能错了。通过使用淡出的回调，你可以创建你想要的效果。

$('#my_link').css({ color : 'red' }).delay(500).fadeOut(500, function()
{
    $('#my_link').css({ color : 'blue' }).fadeIn(500);
});