jQuery .animate background color, box shadow, and font color

Question

I'm new to jQuery and Javascript. I'm using BitStorms box shadow plugin with this, and before adding the background color and color properties, it was working fine. I'm not sure if there's something wrong with my syntax or what the problem is, but here's the code.

$('.menu-btns li a').hover(function() {
$(this).animate({
    boxShadow: "inset 0 0 10px #000", 
    background-color: "#000",
    color: "#efefef"
    }, "fast");
},
function() {
    $(this).animate({
    boxShadow: "0 0 0", 
    background-color: "#fff", 
    color: "#efefef"
    }, "fast");
});

As the code is, it's not animating the box shadow anymore, nor the background color or font color.

JQuery itself can't animate colors. You should use this plugin for color animation: http://www.bitstorm.org/jquery/color-animation/ — sinisake, Jul 05 '13 at 09:46
After adding the plugin, its not only doing the animation for my first "a" property, and its only doing the box shadow. Not only that but its only animating for the mouseenter not mouseleave. — sneakycrow, Jul 05 '13 at 10:04

score 1 · Answer 1 · edited May 23 '17 at 12:34

1

{ 
    background-color: "#fff"
}

is a syntax error (the console should've told you that). You will have to quote the property name to make it valid:

{
    "background-color": "#fff"
}

Also notice that for animating colors with jQuery you will need to install an extra plugin.

edited May 23 '17 at 12:34

Community

1
1

answered Jul 05 '13 at 09:47

Bergi

630,263
148
957
1,375

See [jQuery animate backgroundColor](http://stackoverflow.com/q/190560/1048572) or [just here](https://www.google.de/search?q=animate+colors+jquery) (Never used one personally) – Bergi Jul 05 '13 at 09:53
@M.Bennett: I don't get what you mean with `(…)`. Array literals (`[…]`) do not have any keys. Object literals (`{…}`) require quotes on keys when they are no valid identifiers. – Bergi Jul 05 '13 at 10:40
@Bergi: I can't delete the comment anymore - you're right. I was a little fixated on JSON. – M.Bennett Jul 05 '13 at 14:05
@M.Bennett: You can always delete it, you only can't edit it :-) – Bergi Jul 05 '13 at 14:07

score 0 · Answer 2 · answered Jul 05 '13 at 09:44

0

Use camel case

backgroundColor

For font color animate try to use different colors (now colors are equal).

answered Jul 05 '13 at 09:44

z1m.in

1,661
13
19

jQuery .animate background color, box shadow, and font color

2 Answers2