jquery改变背景颜色

我正在试用这个例子的jQuery：

$(document).ready(function(){ $("button").mouseover(function(){ $("p#44.test").css("background-color","yellow"); $("p#44.test").hide(1500); $("p#44.test").show(1500); $("p#44.test").css("background-color","red"); }); }); 

我期待以下事情发生：

 1. Color of <p> to turn yellow 2. <p> to slowly fade 3. <p> to slowly show 4. Color of <p> to turn red 

但这是实际发生的事情：

 1. <p> turned red 2. <p> slowly hid away 3. <p> slowly showed 

这是为什么？

Answer 1

.css()函数不会在运行animation之后排队，它是即时的。

要匹配你之后的行为，你需要执行以下操作：

 $(document).ready(function() { $("button").mouseover(function() { var p = $("p#44.test").css("background-color", "yellow"); p.hide(1500).show(1500); p.queue(function() { p.css("background-color", "red"); }); }); }); 

.queue()函数等待运行animation运行，然后触发提供的函数中的任何内容。

Answer 2

这是应该如何：

码：

 $(function(){ $("button").mouseover(function(){ var $p = $("#P44"); $p.stop() .css("background-color","yellow") .hide(1500, function() { $p.css("background-color","red") .show(1500); }); }); }); 

演示： http : //jsfiddle.net/p7w9W/2/

说明：

在切换背景颜色之前，您必须等待animationfunction的callback。 你也不应该只使用数字ID：s，如果你有一个你的<p>的ID，那么你不应该在你的select器中包含一个类。

我还增强了你的代码（jQuery对象的caching，链接等）

更新：正如VKolevbuild议，当物品被隐藏时，颜色现在正在改变。

Answer 3

尝试延迟最后一个颜色淡入淡出。

 $("p#44.test").delay(3000).css("background-color","red"); 

什么是HTML中的id属性的有效值？
ID的不能以数字开始！