Menu Color Fade on Hover with Jquery

Question

One of the members of this community was kind of enough to produce some Jquery code that in effect, fades in a color on rollover and fades it out on rollOut. For convenience, I've included the JSFiddle link here. The main functionality works well. However, when I hover on and off a button rapidly, there appears to be a delayed response that ends up with the hover state becoming dormant even though the mouse is over the button. I'm very close to what I'm looking for and the support of this community has been most appreciated!

JSFiddle: http://jsfiddle.net/RV6fE/3/

Jquery

$(document).ready(function () {

    //Set the anchor link opacity to 0 and begin hover function
    $("#menu-sample-menu li a").hover(function () {

        //Fade to an opacity of 1 at a speed of 200ms
        $(this).fadeOut(0).addClass('hover').fadeIn(300);

        //On mouse-off
    }, function () {

        //Fade to an opacity of 0 at a speed of 100ms
        $(this).fadeOut(300)
            .queue(function () {
            $(this).removeClass('hover').fadeIn(0).dequeue()
        });

    });
});

HTML

<nav id="access">
    <ul id="menu-sample-menu" class="menu">
        <li id="menu-item-198" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-198"><a href="http://www.threecell.com/demo/category/health-care-professional/">Health Care Professional</a>

        </li>
        <li id="menu-item-197" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-197"><a href="http://www.threecell.com/demo/category/web-designer/">Web Designer</a>

            <ul class="sub-menu">
                <li id="menu-item-199" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-199"><a href="http://www.threecell.com/demo/category/construction-worker/">Construction Worker</a>

                </li>
            </ul>
        </li>
    </ul>
</nav>

Style

#access {
    padding:0 20px;
    background:#111;
    box-shadow:0 0 7px rgba(0, 0, 0, .1);
}

#access ul {
    float:left;
    padding:0;
    margin:0;
    list-style:none;
    font-weight:600;
    text-transform:uppercase;
}

#access li {
    position:relative;
    float:left;
    padding:0;
    margin:0;
}

#access ul li:first-child {
    padding-left:0;
}

#access a {
    display:block;
    padding:15px 24px;
    color:#f0f0f0;
    text-decoration:none;

}

#menu-sample-menu li {
    color: black;
    text-shadow: 0px 1px 4px #777;
    background-color: green;
    padding: 0 12px 0 12px;
}

#menu-sample-menu li a.hover {
    background: orange;
}


#access li.current_page_item > a,
#access li.current-menu-item > a {
    background: orange;
    color: white;
    text-decoration:none;
}

#access a span {
    color:#999;
    font-size:11px;
    font-style:italic;
    font-weight:normal;
    line-height:1.62em;
    text-transform:none;
}

Thanks in advance for the help,

T

Why didn't you use a CSS transition or a color transition using jQuery UI? — Ionică Bizău, Aug 26 '13 at 03:27
I actually didnt want to use CSS3 because the lack of IE9 support. Regarding the color transition, I'd be interested in seeing how that would work and the differences from the code above — user2325396, Aug 26 '13 at 03:45
Ah, ok. I don't really care about IE because I am a Linux fan... :-) — Ionică Bizău, Aug 26 '13 at 03:56
Life would be made so much easier if there was a perfect universal browser :) — user2325396, Aug 27 '13 at 23:30

score 3 · Accepted Answer · answered Aug 26 '13 at 03:28

3

try adding stop() to stop currently-running animation, like

...
$(this).stop().fadeOut(0).addClass('hover').fadeIn(300);
...

and

...
$(this).stop().fadeOut(300)
    .queue(function () {
         $(this).removeClass('hover').fadeIn(0).dequeue()
});
....

Demo:: jsFiddle

answered Aug 26 '13 at 03:28

Sudhir Bastakoti

99,167
15
158
162

pls check the fiddle link – Sudhir Bastakoti Aug 26 '13 at 03:31
Good, +1. :-) I always like jsfiddles. – Ionică Bizău Aug 26 '13 at 03:41
Hi Sudhir, could you suggest a way to implement this code without the link text fading out along with the background. In other words, I'd like for the text to stay while just the background fades in. Thanks for any advice you can provide. – user2325396 Aug 27 '13 at 23:31
Hello all...can I anyone suggest how to implement the above code without having the text fade out as well. I'd prefer not to use the background-color property as I may want to include background images in my hover class at some point. Thank you all in advance for any assistance you can provide – user2325396 Aug 30 '13 at 04:43

score 2 · Answer 2 · answered Aug 26 '13 at 03:40

You could use this CSS3 feature:

#access {
padding:0 20px;
background:#111;
box-shadow:0 0 7px rgba(0, 0, 0, .1);
}

#access ul {
float:left;
padding:0;
margin:0;
list-style:none;
font-weight:600;
text-transform:uppercase;
}

#access li {
position:relative;
float:left;
padding:0;
margin:0;
}

#access ul li:first-child {
padding-left:0;
}

#access a {
display:block;
padding:15px 24px;
color:#f0f0f0;
text-decoration:none;

}

#menu-sample-menu li {
color: black;
text-shadow: 0px 1px 4px #777;
background-color: green;
-webkit-transition: background-color 0.4s ease; /* CSS3 feature for your background-color transition */
-moz-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
padding: 0 12px 0 12px;
}

#menu-sample-menu li:hover {
background: orange;
}


#access li.current_page_item > a,
#access li.current-menu-item > a {
background: orange;
color: white;
text-decoration:none;
}

#access a span {
color:#999;
font-size:11px;
font-style:italic;
font-weight:normal;
line-height:1.62em;
text-transform:none;
}

Instead of JQuery. Here is the result you probably want: http://jsfiddle.net/RV6fE/12/

Thank you for the css3 substitute. I wanted to go with Jquery so that it would be supported in Ie9. — user2325396, Aug 26 '13 at 03:42

score 1 · Answer 3 · answered Aug 26 '13 at 03:28

1

You can tell the element to immediately stop what it's doing before you start animating anything.

    $("#menu-sample-menu li a").hover(function () {

        //Fade to an opacity of 1 at a speed of 200ms
        $(this).stop().fadeOut(0).addClass('hover').fadeIn(300);

        //On mouse-off
    }, function () {

        //Fade to an opacity of 0 at a speed of 100ms
        $(this).stop().fadeOut(300)
            .queue(function () {
            $(this).removeClass('hover').fadeIn(0).dequeue()
        });

    });

answered Aug 26 '13 at 03:28

Caleb Lewis

523
6
20

Hi Caleb, could provide some guidance on how to fade out just the background without the text link fading with it? Thx! – user2325396 Aug 27 '13 at 23:32
Maybe this could be of some help to you: http://stackoverflow.com/questions/4612075/jquery-fade-to-color-on-mouse-hover – Caleb Lewis Aug 29 '13 at 14:55

Menu Color Fade on Hover with Jquery

3 Answers3

Linked