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

这是为什么？

The .css()函数不会在运行动画之后排队，它是瞬时的。

为了匹配您所追求的行为，您需要执行以下操作：

$(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");
    });
  });
});

The .queue()函数等待正在运行的动画结束，然后触发所提供函数中的任何内容。