CODEWITHSUNDEEP
jquerybackgroundjquery-animate
Yanh Huan
Yanh Huan

Reputation: 163

Jquery background animate

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

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

Upvotes: 6

Views: 25193

Answers (6)

Taha Jahangir
Taha Jahangir

Reputation: 4902

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

Upvotes: 1

Jeromy French
Jeromy French

Reputation: 12121

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

Upvotes: 0

amitgur
amitgur

Reputation: 462

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

Upvotes: 0

matadur
matadur

Reputation: 819

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

Upvotes: 1

Thai
Thai

Reputation: 11354

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/

Upvotes: 5

Jerod Venema
Jerod Venema

Reputation: 44632

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

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

Upvotes: 2

Related Questions