jQuery更改背景颜色 [英] Jquery change background color

问题描述

我正在尝试通过以下示例进行jquery:

I was trying out jquery with this example:

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

我希望会发生以下情况:

I expected the following to happen:

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

但这是实际发生的情况:

But this is what actually happened:

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

那是为什么?

推荐答案

.css()函数不会在正在运行的动画后面排队，而是即时的.

The .css() function doesn't queue behind running animations, it's instantaneous.

要匹配您所遵循的行为，您需要执行以下操作:

To match the behaviour that you're after, you'd need to do the following:

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

The .queue() function waits for running animations to run out and then fires whatever's in the supplied function.

这篇关于jQuery更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！