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，如果您有<p>的ID，则不应在选择器中包含类。

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

<强>更新正如 VKolev 所建议的那样，当项目被隐藏时，颜色正在改变。

Answer 3

尝试延迟最后一次褪色。

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

What are valid values for the id attribute in HTML?
ID无法以数字开头!!!

Jquery改变背景颜色

3 个答案: