jQuery 悬停动画多次触发

Question

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

这是我的代码。

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

您可以在此处看到当您将鼠标悬停在其上方时它如何淡入、淡出并重新出现。

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

Answer 1

您必须使用stop()函数。

jQuery(function($) {

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

});

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

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