javascript - 防止悬停效果循环

Question

我制作了一个悬停效果，可将顶部 block 切换为向上/向下滑动，同时底部 block 向上/向下滑动。

正如您在 fiddle 中看到的:https://jsfiddle.net/wmaL1pm5/1/

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

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

如果您悬停另一个 block 或鼠标位于当前 block 上，如何防止悬停效果循环。

下面是我当前的 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')
});

Answer 1

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

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