Jquery background animate

问题:

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

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

回答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/

回答2:

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

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

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

回答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)}})

回答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

回答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);