悬停动画上的jQuery多次触发 [英] jQuery on hover animation fires multiple times

问题描述

我试图弄清楚为什么我的悬停功能表现得很奇怪.将鼠标悬停在div上时，另一个div变为可见.但是，当我将光标向下移动到可见的div时，它会淡出并再次淡入.这应该不会发生，并且应该一直保持可见状态，直到我的光标离开主容器为止.

I am trying to figure out why my on hover function is acting weird. When you hover over a div, another div becomes visible. However, when I move my cursor down to the div that becomes visible, it fades out and fades back in again. This should not happen and should just stay visible until my cursor leaves the main container.

这是我的代码.

HTML

<div id="searchWrapper" class="fleft">
    <div class="box">Hover here!</div>
    <div class="searchLinks" style="display: none;">
        <form id="search_mini_form" action="" method="get">
            <div class="form-search">
                <label for="search">Search:</label>
                <input id="search" type="text" name="q" value="" class="input-text" maxlength="128" autocomplete="off">
                <button type="submit" title="Search" class="button"><span><span>Search</span></span></button>
                <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
                <script type="text/javascript">
                    //<![CDATA[
                    var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
                    searchForm.initAutocomplete('http://removed.com/index.php/catalogsearch/ajax/suggest/', 'search_autocomplete');
                    //]]>
                </script>
            </div>
        </form>
    </div>
</div>

jQuery

<script type="text/javascript">
    jQuery(function($) {

        $("#searchWrapper").hover(
            function () {
                $(".searchLinks").fadeIn( 500 );
            },
            function () {
                $(".searchLinks").fadeOut( 500 );
            }
        );

    });
</script>

CSS

#searchWrapper {
    position:relative;
}

#searchWrapper .searchLinks {
    position: absolute;
    z-index: 99999;
    top: 50px;
    background: #e7e7e7;
    right: -145px;
    display:none;
    padding:10px;
}

#searchWrapper .box {
    border:solid 1px #555;
    padding: 20px 0px;
    text-align:center;
}

您可以在此处看到它如何淡入，淡出然后在将鼠标悬停在上面时又返回.

You can see here how it fades in and then fades out and back in once you hover over it.

http://jsfiddle.net/421g2cdh/7/

推荐答案

您必须使用stop()函数.

jQuery(function($) {

    $("#searchWrapper").hover(
        function () {
            $(".searchLinks").stop(true,true).fadeIn( 500 );
        },
        function () {
            $(".searchLinks").stop(true,true).fadeOut( 500 );
        }
    );

});

此外，如果您不希望在鼠标位于它与它的父级之间时看到它的淡出效果，请减小.searchLinks的边距. (顶部填充而不是顶部)

Also, reduce the margin of .searchLinks if you don't want to see it fadeOut when the mouse is between it and it's parent. (padding-top instead of top)

(请参阅 http://jsfiddle.net/421g2cdh/11/)

这篇关于悬停动画上的jQuery多次触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！