.css().animate() not working?

Question

I wanted to highlight an element with this:

$('input.step:last').css('background','#003').animate({'background':'#fff'},300);

But it doesn't work.

http://jsfiddle.net/Cpwmm/

why?

Answer 1

To animate colors you will need to add the jQuery Animate Colors plugin.

http://www.bitstorm.org/jquery/color-animation/

Then, you should use:

$('input.step:last').css('background-color','#003')
                    .animate({'background-color':'#fff'},300);

Mind the difference that you should animate the 'background-color' property rather than the 'background' one.

http://jsfiddle.net/Cpwmm/7/

Answer 2

Your need the JQuery.Color plugin (part of jquery-ui). Then do,

$(document).ready(function(){
     $('input.step:last')
     .css({'backgroundColor':'#003'})
    .animate({'backgroundColor':'#fff'},300);
})​