JQuery Browser

Question

Is it possible to animate background-color in jQuery because it does not work.

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

Answer 1

From docs ,

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

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

The color animation plugin for jQuery also does this.

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

Answer 2

You will need a plugin to create color animations using jQuery:

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

Answer 3

Try the following:

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

I had variable success with animations, but found that using the built-in callback plus jQuery css seems to work in 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 name it like this:

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

Answer 4

This is simple code for animating RGB colors using pure jQuery (and not using jQuery.Color )

 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 the same effect. your animat can be achieved 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 an error

Syntax Error: Unexpected Token -

I managed to get it to work by encapsulating the CSS background-color property in single quotes:

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