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

Answer 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()
        });

    });

Answer 2

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/

Answer 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