0

Possible Duplicate:
jQuery animate backgroundColor

http://johanberntsson.se/dev/fysiosteo/

If you hover the menu, i would like the main menu to fade out its backbgroundcolor to #fff over 1 second. But i cant get it to work. My code:

 $('#menu-main-menu').children('li').mouseout(function () {
            $(this).css('background', '#AFFFAF').animate({ 'background' : '#fff' }, 1000);
        });

I never use animate(), so ive probably missed something obvious. Thanks.

Community
  • 1
  • 1
Johan
  • 13
  • 1
  • 2
    +1 for duplicate, you also have to use `background-color` instead of `background`. The color plugin is also included in jQuery UI, so if you're using that, you don't need anything else apart from the fix above. – DarthJDG Jul 13 '11 at 21:51
  • Doesn't look like that plugin's page is up anymore. Can anyone find a more recent link? – Abe Miessler Jul 13 '11 at 21:57
  • Included jquery UI, but i still dont see an animation. Can you check the source to se if i missed something? – Johan Jul 13 '11 at 22:00

2 Answers2

0

maybe place a function into your animate tag so...

$(this).css('background', '#AFFFAF').animate(function() {$(this).css('background', '#FFF')}, 1000);
kapa
  • 77,694
  • 21
  • 158
  • 175
Matt Helm
  • 47
  • 1
  • 7
0

Try this snippet:

$("#menu-main-menu").children('li').mouseout(function() {
    $(this).animate({ backgroundColor: "#fff" }, 1000);
});
Kyle
  • 4,202
  • 1
  • 33
  • 41