How do I use the jQuery UI color animation to change from an elements color and then back to it?

Question

I'm using the following snippet:

$('input[value=NEW]:hidden').attr('value', '').parent().parent().animate({
                    backgroundColor: "#FF9933",
                    duration: 800
                }).delay(500).animate({
                    duration: 800,
                    backgroundColor: '#ffffff'
                });

However, I would like to animate the element to the color "#FF9933" but then animate BACK to the color it was before changing.

I tried just persisting the elements background color in a var and using it, but the jQuery UI animate didn't seem to like the RGB() string that .css() gave me.

How would you do this?

Answer 1

i store it if it's in a handler.. in your provided example you could use a local scoped var

not using local scoped var:

var $parent = $('input[value=NEW]:hidden').attr('value', '').parent().parent();
$parent.data('oldBgColor', $parent.css('backgroundColor') //save the old bg
        .animate({
              backgroundColor: "#FF9933",
              duration: 800
         }).delay(500).animate({
              duration: 800,
              backgroundColor: $parent.data('oldBgColor')
         });

with local scope:

var $parent = $('input[value=NEW]:hidden').attr('value', '').parent().parent();
var oldBgColor = $parent.css('backgroundColor');//save the old bg - still accessible in the delayed animate 
$parent.animate({
              backgroundColor: "#FF9933",
              duration: 800
         }).delay(500).animate({
              duration: 800,
              backgroundColor: oldBgColor
         });