Question

我正在使用jQuery来隐藏并显示其父div上的div。它可以工作，但唯一的问题是，当你快速地翻转和关闭几次时，它会一次又一次地淡入和淡出，直到它完成它，就像你移动鼠标一样多次。见：http://api.jquery.com/hover/#hover-handlerIn-handlerOut 这里的第一个示例演示如果您将它们悬停在它们上面几次非常快，那么请注意您可以看到我的意思。

这是我的代码，是否有任何方法可以让它更加用户友好并且不会重复这么多次？

    $(function () { 
        $('.hide').fadeOut("fast"); 

        $( ".fourth" ).hover(
            function() {
                $( this ).find('.hide').fadeIn("slow"); ;
            }, function() {
                $( this ).find('.hide').fadeOut("slow"); 
            }

        );
        <div class="fourth"> 
            <div class="products">
                <h4 class="hide"><a href="#">Laern More</a></h4>
            </div>
        </div>

Answer 1

您需要使用.stop（）函数来停止先前启动的动画：

$( ".fourth" ).hover(

    function() {
        $( this ).find('.hide').stop().fadeIn("slow"); ;
    }, function() {
        $( this ).find('.hide').stop().fadeOut("slow"); 
    }

);

有关详细信息，请参阅jQuery .stop() documentation。

Answer 2

使用.stop()停止当前正在运行的动画，使用.fadeToggle()保持代码简单。

$(".fourth").hover(function() {

   $(this).find('.hide').stop().fadeToggle("slow");

});

FIDDLE。

jquery悬停和关闭问题

2 个答案: