May 27, 2013

jQuery animate not working at all

Nordvind’s Question:

I want to set a background-color div property on DOM ready, then perform some animation, like this: $("#test").css('background-color','red').animate({ 'background-color' : '#FFF'}, 500);. Div looks like this <div id="test">11</div>, and it has a background-color property set in CSS file #test{
background-color:#FFF;
}

Now the question – why animation is not working? You can see the code here – http://jsfiddle.net/hzdcM/

You need to have jQuery UI included to make you background-color animation to work

Demo --> http://jsfiddle.net/hzdcM/1/

.animate() function does not support animating colors. Use jQuery color plugin. or you can use jQuery UI Library.

UI Library is very heavy for just the color use.

Also you have use backgroundColor not background-color to animate the color properly.

$("#test")
   .css('backgroundColor','red')
   .animate({ 'backgroundColor' : '#FFF'}, 500);

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!