悬停动画上的jQuery多次触发答案

【问题标题】：jQuery on hover animation fires multiple times悬停动画上的jQuery多次触发
【发布时间】：2014-12-13 03:43:35
【问题描述】：

我试图弄清楚为什么我的悬停功能表现得很奇怪。当您将鼠标悬停在一个 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/

【问题讨论】：

标签： jquery fadein fadeout jquery-hover

【解决方案1】：

您必须使用stop() 函数。

jQuery(function($) {

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

});

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

（见http://jsfiddle.net/421g2cdh/11/）

【讨论】：

谢谢！效果很好。

【解决方案2】：

每次悬停元素时，都必须停止匹配元素上当前正在运行的动画。

使用stop()

试试：

 jQuery(function($) {

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

    });

DEMO

【讨论】：

【解决方案3】：

使用stop()，您可以使用 in/out hover 方法处理程序：

jQuery(function ($) {
    $("#searchWrapper").hover(
    function () {
        $(".searchLinks").stop().fadeToggle(500);
    });
});

jsFiddle

fadeToggle()

【讨论】：

+1 用于fadeToogle，但-1 用于不回答真正的问题:)
正确，我什至没有发现与您的答案不同；）

【解决方案4】：

以上方法都不适合我，但我找到了一个使用.unbind() 只触发一次的解决方案：

$("#sidebar").unbind().on('mouseenter', function() {
    console.log('mouse entered sidebar');
});

【讨论】：