How can I use the jQuery UI color animation to fade an element to a color then back to its original color?

I'm using the following right now:

$('input[value=NEW]:hidden').parent().pare开发者_如何学JAVAnt().animate({
                            backgroundColor: "#FF9933",
                            duration: 500
                        }).animate({
                            duration: 500,
                            backgroundColor: "#FFFFFF"
                        });

It seems like this ~almost~ works but it doesn't seem to be waiting the full time.

Is there a better way to do this?

---

Well, your code seems to work for me (see my comment under your question).

Although I'm not sure what you mean by "it doesn't seem to be waiting the full time".

Do you mean that you want a delay before the second animation?

If so, try this: http://jsfiddle.net/7kKvW/1/

$('input[value=NEW]:hidden').parent().parent().animate({
    backgroundColor: "#FF9933",
    duration: 500
})  // delay the next item in the queue by 500ms
  .delay(500).animate({
    duration: 500,
    backgroundColor: "#FFFFFF"
});

• http://api.jquery.com/delay/ (requires jQuery 1.4 or later)

---

I found the following approach a little bit smoother for items that may begin animating within the duration of the two animation events. Also, Instead of chaining the event with a delay, I added it as an complete function so that if the first one is stopped, the second doesn't still happen.

Also, the duration doesn't have to be included as an object. Duration is the default, second parameter to the animate effect.

http://api.jquery.com/stop/

http://api.jquery.com/animate/

// Stop makes sure any previous animations on this 
// elements aren't making the display 'flashing' in unexpected ways
$(jqueryLookup).stop(true, true, true).animate({
    backgroundColor:"#F93",
}, 1000, function() {
    // Begin the second animation upon completing the first
    $(this).animate({
        backgroundColor:"#FFF"
    }, 500);
});

Hope that helps you!