backgroundColor does not animate, but width does in jQuery

Question

I want the color of my div.navBtn elements to change through an animation effect. It isn't working out and I don't know why.

$(document).ready(function()
{
  $("button").click(function()
  {
    $("div.navBtn").animate(
    {
      width:'+=10px',
      backgroundColor: "#aa0000"
    });
  });
});

backgroundColor is what does the actual color changing but it does not work. Width +=10 works perfectly, backgroundColor does absolutely nothing. Is the syntax wrong or something??? I copied "backgroundColor: "#aa0000"" from another help posting here. Does anyone know what the problem is?

http://stackoverflow.com/questions/10090023/jquery-animate-fade-background-color-or-image-in-div-when-hover-a-link — jasonflaherty, Aug 20 '13 at 23:20

score 1 · Answer 1 · answered Aug 20 '13 at 23:18

1

You have to include jQuery UI in order to animate colours with jQuery.animate.

answered Aug 20 '13 at 23:18

Musa

96,336
17
118
137

score 1 · Answer 2 · answered Aug 20 '13 at 23:18

1

You cannot animate colour's with jQuery You may have to use CSS instead or jQuery UI, but you shouldn't include that just to animate colours.

answered Aug 20 '13 at 23:18

iConnor

19,997
14
62
97

http://stackoverflow.com/questions/10090023/jquery-animate-fade-background-color-or-image-in-div-when-hover-a-link – jasonflaherty Aug 20 '13 at 23:24
Yes what about it? Please don't tell me your saying **There's a PLUGIN for that** – iConnor Aug 20 '13 at 23:25

backgroundColor does not animate, but width does in jQuery

2 Answers2