jquery fading in background color property on hover?

Question

I've got a small piece of code that isn't working, take a look:

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

It's meant to:

1) unset the CSS property background-color from a list item with the pseudo-class :hover in the unordered list with an id of mainmenu (this is so those without Javascript enabled can still experience a similar effect to what I'm trying to achieve with jQuery)

2) When the same list item is then hovered over, it should animate in the background-color on said list item.

But it doesn't. Instead, the first task isn't even completed, let alone animating in the background on hover. It's worth noting that I have triple checked my elements (I even copied them and pasted them into the script to make sure).

And I am using jQuery UI - which I understand can perform such tasks involving animating certain CSS properties. Ideas?

score 2 · Answer 1 · answered Aug 06 '12 at 15:55

Changing your target id to #mainmenu > li will make it affect only the parent level li and not the child li. Also try backgroundColor: 'transparent !important'

Try this:

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

score 2 · Answer 2 · edited May 23 '17 at 12:15

2

As mentioned before ... 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');
        }
    );
});

edited May 23 '17 at 12:15

Community

1
1

answered Dec 25 '11 at 11:15

Tim Vermaelen

6,869
1
25
39

That works great, except my starting color is transparent, and this doesn't work with a transparent starting color, plus it's affecting child elements (a submenu) - so really, this isn't quite what I'm looking for. – marked-down Dec 25 '11 at 20:59

techfoobar · Answer 3 · 2011-12-25T15:17:12.180

1

EDIT

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

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

The parameter for speed should be a string or a number. For example: "slow" or 10000 (millisecs).

ex:

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

or

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

edited Dec 25 '11 at 15:17

answered Dec 25 '11 at 10:04

techfoobar

65,616
14
114
135

Argh, it's a late night - I should've picked that up, but it doesn't fix my problem however. – marked-down Dec 25 '11 at 10:11
1

`backgroundColor` is a valid CSS property in jQuery, as demonstrated by Tim's answer, also, this doesn't fix my problem, sadly. – marked-down Dec 25 '11 at 21:00

Biju B Adoor · Answer 4 · 2013-07-05T21:49:18.267

0

I think it is the best solution for fading in background color, forecolor and border color use plugins like color animation jQuery plugin,

Use :

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

(Remove the back slash).

and after enter the before codes. like.

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

More reference click here

edited Jul 05 '13 at 21:49

answered Jul 05 '13 at 21:42

Biju B Adoor

528
4
6

score 0 · Answer 5 · answered Dec 25 '11 at 10:07

0

does this work?:

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

answered Dec 25 '11 at 10:07

bingjie2680

7,643
8
45
72

Actually, I just retried it with the first background color set to #AAA instead of blank and it worked!!! :D But is there any way I can set `background-color` to nothing initially because having to set it at a preset color ruins how it looks before a mouse rollover? Cheers. – marked-down Dec 25 '11 at 10:23
Also, it's affecting a child menu inside this menu as well. Is there any way to apply the animation to only that particular element, instead of the children elements inheriting it? – marked-down Dec 25 '11 at 10:26
@Antilogical13 You can use `background-color:inherit;` – henryaaron Dec 25 '11 at 17:28

jquery fading in background color property on hover?

5 Answers5