jQuery悬停开关问题

Question

我正在使用jQuery隐藏和显示其父div悬停时的div。 它起作用了，但是唯一的问题是，当您真正快速地进行几次鼠标悬停时，它会一次又一次地进行淡入淡出，直到完成鼠标的次数与您上下移动鼠标一样。 请参阅： http : //api.jquery.com/hover/#hover-handlerIn-handler在此处显示第一个示例的演示，如果您将鼠标悬停在它们上真的非常快，然后看一下就可以明白我的意思。

这是我的代码，有没有办法使它更加用户友好并且不重复多次？

    $(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（）文档 。

Answer 2

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

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

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

});

FIDDLE 。