jQuery改变背景颜色答案

【问题标题】：Jquery change background colorjQuery改变背景颜色
【发布时间】：2011-05-16 01:13:47
【问题描述】：

我正在用这个例子尝试 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

这是为什么呢？

【问题讨论】：

标签： jquery

【解决方案1】：

尝试延迟最后一次褪色。

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

What are valid values for the id attribute in HTML?
ID 不能以数字开头！！！

【讨论】：

第二个例子不起作用，因为.css() 函数没有链接到动画流中。

【解决方案2】：

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

【讨论】：

【解决方案3】：

应该是这样的：

代码：

$(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，如果你有一个 <p> 的 ID，你不应该在你的选择器中包含一个类。

我还增强了您的代码（jQuery 对象的缓存、链接等）

更新： 正如 VKolev 所建议的，当项目被隐藏时，颜色现在会发生变化。

【讨论】：

设置 $p.css("background-color", "red");在 $p.show 之前会使它更好一点，在再次显示 p 内容后没有闪烁效果。