Jquery change background color

Question

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

Why is that?

score 235 · Accepted Answer · edited Dec 09 '13 at 23:18

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

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

score 23 · Answer 2 · edited May 23 '17 at 11:47

23

try putting a delay on the last color fade.

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

What are valid values for the id attribute in HTML?
ID's cannot start with digits!!!

edited May 23 '17 at 11:47

Community

1
1

answered Nov 26 '10 at 07:11

austinbv

9,297
6
50
82

1

The second example won't work, since the `.css()` function doesn't chain into the animation flow. – Klemen Slavič Nov 26 '10 at 07:23

Peter Örneholm · Answer 3 · 2010-11-26T12:36:08.977

This is how it should be:

Code:

$(function(){
  $("button").mouseover(function(){
    var $p = $("#P44");
    $p.stop()
      .css("background-color","yellow")
      .hide(1500, function() {
          $p.css("background-color","red")
            .show(1500);
      });
  });
});

Demo: http://jsfiddle.net/p7w9W/2/

Explanation:

You have to wait for the callback on the animating functions before you switch background color. You should also not use only numeric ID:s, and if you have an ID of your <p> there you shouldn't include a class in your selector.

I also enhanced your code (caching of the jQuery object, chaining, etc.)

Update: As suggested by VKolev the color is now changing when the item is hidden.

Setting the $p.css("background-color", "red"); before the $p.show will make it a little bit nicer, without that blink effect after showing the p-content again. — VKolev, Nov 26 '10 at 07:57

Jquery change background color

3 Answers3

Linked