使用Jquery悬停菜单颜色淡入淡出 [英] Menu Color Fade on Hover with Jquery

问题描述

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

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/

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

推荐答案

尝试添加停止（）停止当前正在运行的动画，例如

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

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

和

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

演示:: jsFiddle

这篇关于使用Jquery悬停菜单颜色淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！