javascript - 防止悬停效果循环

我做了一个悬停效果，可以在slide up/down的同时将顶部块切换到bottom block slides up / down。

如您在小提琴中看到的：https://jsfiddle.net/wmaL1pm5/1/

但是，如果您在该块上快速滑动鼠标，即使您不在该块上，悬停效果也会不断重复。

在我的HTML中，我有2行，每3行包含3个这些块。如果您在这些行上滑动鼠标，则所有块都将重复其悬停效果。

如果您将鼠标悬停在另一个块上，或者您的鼠标位于当前块上，那么如何防止悬停效果循环。

在我当前的jQuery代码下面：

$(".usp-hover").mouseenter( function(){
     $( this ).find( ".usp-block-title" ).slideToggle('slow')
     $( this ).find( ".usp-block-hover" ).removeClass("usp-block-hidden");
     $( this ).find( ".usp-block-hover" ).slideDown('slow')
});

$(".usp-hover").mouseleave( function(){
     $( this ).find( ".usp-block-title" ).slideToggle('slow')
     $( this ).find( ".usp-block-hover" ).slideToggle('slow')
});

最佳答案

您必须在匹配的元素上停止当前正在运行的动画。

$(".usp-hover").mouseleave( function(){
    $( this ).find( ".usp-block-title" ).stop( true, true ).slideToggle('slow')
    $( this ).find( ".usp-block-hover" ).stop( true, true ).slideToggle('slow')
});