Menu
Is it possible to animate the background-color in jQuery, because it is not working.
$('#something').animate({
background :"red"
}, 1000);
726
The background color animate can be performed with the help of the animate() function or css() function. The background color animate is used to set the background color of the selected elements.
jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);
jQuery can be several times slower than CSS when talking about animations. CSS animations and transitions have the advantage of being hardware accelerated by the GPU, which is really good in moving pixels.
To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to check the present value of the property for the selected element.
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/
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
