使用 Jquery 悬停时菜单颜色淡化

Question

这个社区的一个成员足以生成一些 Jquery 代码，这些代码实际上在翻转时淡出颜色并在 rollOut 时淡出。为方便起见，我在此处包含了 JSFiddle 链接。主要功能运行良好。但是，当我快速悬停在按钮上和关闭按钮时，似乎会出现延迟响应，即使鼠标悬停在按钮上，也会导致悬停状态变为休眠状态。我非常接近我正在寻找的东西，并且非常感谢这个社区的支持！

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>

风格

#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;
}

提前感谢您的帮助，

T

Answer 1

您可以告诉元素在开始制作动画之前立即停止它正在执行的操作。

$("#menu-sample-menu li a").hover(function () { //以200ms的速度淡入不透明度1 $(this).stop().fadeOut(0).addClass('hover').fadeIn(300); //鼠标关闭 }， 功能 （） { //以100ms的速度淡入不透明度为0 $(this).stop().fadeOut(300) .queue（函数（）{ $(this).removeClass('hover').fadeIn(0).dequeue() }); });

Answer 2

尝试添加stop() 来停止当前正在运行的动画，比如

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

和

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

演示::jsFiddle

Answer 3

您可以使用这个 CSS3 功能：

#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;
}

而不是 JQuery。这是您可能想要的结果：http://jsfiddle.net/RV6fE/12/