Does jQuery disappear in hover color background properties?

Question

I have a small piece of code that does not work, look:

$(document).ready(function() { $('ul#mainmenu li:hover').css({backgroundColor:''}); $('ul#mainmenu li').hover(function() { $(this).animate({backgroundColor:'#2E8AE5'}, slow); }); }); 

It meant:

1) remove the CSS background-color property from the list item with the :hover pseudo- :hover in an unordered list with mainmenu identifier (this means that those with Javascript enabled may still look like what I'm trying to achieve with jQuery)

2) When the same list item then freezes, it should be animated in the background color in the specified list item.

But this is not so. Instead, the first task has not yet been completed, not to mention hovering in the background. It is worth noting that I checked the triple elements (I even copied them and pasted them into the script to make sure)).

And I use jQuery UI, which, as I understand it, can perform such tasks associated with animating certain CSS properties. Ideas?

Answer 1

Like the one mentioned above ... use the color plugin

http://jsfiddle.net/Mb6Nd/

 $(document).ready(function() { var lis = $('#mainmenu > li'); $(lis).hover( function() { $(this).animate({backgroundColor:'#2E8AE5'}, 'slow'); }, function(){ $(this).animate({backgroundColor:'#cecece'}, 'fast'); } ); }); 

Answer 2

Changing the target identifier to #mainmenu> li will make it affect only the parent level li, not the child li. Also try backgroundColor: 'transparent! Important '

Try the following:

 $(document).ready(function() { var $lis=$('#mainmenu > li'); $lis.css({backgroundColor:'transparent !important'}); $lis.hover(function() { $(this).animate({backgroundColor:'#2E8AE5'}, 'slow'); }); }); 

Answer 3

EDIT

It should be "background-color". Not backgroundColor. i.e.

 $(this).animate({'background-color':'#2E8AE5'}, "slow"); 

---

The speed parameter must be a string or a number. For example: "slow" or 10,000 (milliseconds).

Example:

 $(this).animate({backgroundColor:'#2E8AE5'}, "slow"); 

or

 $(this).animate({backgroundColor:'#2E8AE5'}, 1000); // in millisecs 

Answer 4

it works?:

 $(document).ready(function() { var $lis=$('#mainmenu li'); $lis.css({backgroundColor:'#aaa'}); $lis.hover(function() { $(this).animate({backgroundColor:'#2E8AE5'}, 'slow'); }); }); 

Answer 5

I think this is the best solution for fading in background colors, plans for using forecolor and border color, such as jQuery plugin color animation ,

Using:

<\ script type = "text / javascript" src = "http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js">

(Remove the backslash).

and after entering the codes before. as.

$('#demodiv').animate({backgroundColor: '#400101'});

More links click here.