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

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();