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

Question

I'm using the following right now:

$('input[value=NEW]:hidden').parent().parent().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?

Answer 1

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)