Jquery改变背景颜色

Question

我用这个例子尝试了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()功能不会在运行动画后排队,它是即时的.

要匹配您所追求的行为,您需要执行以下操作:

$(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()函数等待运行动画用完,然后触发提供的函数中的任何内容.

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/

说明:

在切换背景颜色之前,必须等待动画功能的回调.您也不应该只使用数字ID:s,如果您有ID,<p>那么您不应该在选择器中包含一个类.

我还增强了你的代码(缓存jQuery对象,链接等)

更新: 正如VKolev所建议的,当项目被隐藏时,颜色正在改变.

Answer 3

尝试延迟最后一次褪色.

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

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