Question

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

正如你在小提琴中看到的那样：https://jsfiddle.net/wmaL1pm5/1/

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

在我的HTML中，我有2行，每行包含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')
});

Answer 1

您可以使用.stop()方法停止上一个动画：

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

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

这将停止排队动画并仅显示最新动画，从而阻止循环播放。

Answer 2

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

{{1}}

防止循环中的悬停效果

2 个答案: