jquery悬停和关闭问题

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()文档.