Jquery background animate

Question

Is it possible to animate the background-color in jQuery, because it is not working.

$('#something').animate({
    background :"red"
}, 1000);

Answer 1

From the docs,

The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

So if you use jQuery UI, you can animate background colors. Just make sure that you use backgroundColor and not background.

The color animations plugin for jQuery also does it.

Live Example: http://jsfiddle.net/thai/NXejr/2/

Answer 2

You'll need a plugin to do color animations with jQuery:

http://plugins.jquery.com/project/color

Answer 3

Try this:

$('#something').animate({ backgroundColor: "#FF0000" }, 1000, null, function () {
      $('#something').css("backgroundColor", "#FF0000");
  });

I've had varying success with animate, but found that using its built in callback plus jQuery's css seems to work for most cases. Tested in IE9, FF4, Chrome, using jQuery 1.5.

For a more complete solution, add this plugin:

$(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FF0000";
        var animateMs = duration || 1000;
        var originalBg = this.css("background-color");

        if (!originalBg || originalBg == highlightBg)
            originalBg = "#FFFFFF"; // default to white

        jQuery(this)
            .css("backgroundColor", highlightBg)
            .animate({ backgroundColor: originalBg }, animateMs, null, function () {
                jQuery(this).css("backgroundColor", originalBg); 
            });
    };
});

and call it like so:

$('#something').animateHighlight();

Answer 4

This is simple code to animate RGB colors using pure jQuery (and not using jQuery.Color plugin)

var start = [255, 0, 0], end=[255,255,255];
$('#element').animate({'aaa': 1}, {step: function(now){
    $(this).css('background-color', 'rgb('+
        parseInt(start[0] + (end[0]-start[0]) * now) + ',' +
        parseInt(start[1] + (end[1]-start[1]) * now) + ',' +
        parseInt(start[2] + (end[2]-start[2]) * now) + ')'
    )
}, complete: function(){$(this).css('aaa', 0)}})

Answer 5

You can use CSS3 transitions for that same effect. your animate could be achived with

#something {
  -webkit-transition: background-color 1s linear;
   transition: background-color 1s linear;
   background: red;

}

The only problem with this solution is IE<10 support

Answer 6

Using similar syntax (...{background-color :"red"}...), I get the error

SyntaxError: Unexpected token -

I was able to get it working by encapsulating the CSS property background-color in single quotes:

$('#something').animate({
    'background-color' :"red"
}, 1000);