防止循环悬停效应
防止循环悬停效应
提问于 2017-12-05 13:13:46
我做了一个悬停效果，将顶部块切换到slide up/down，同时切换到bottom block slides up / down。
正如你在Fiddle中看到的：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')
});回答 2
Stack Overflow用户
回答已采纳
发布于 2017-12-05 13:35:33
必须停止匹配元素.上当前正在运行的动画。
$(".usp-hover").mouseleave( function(){
$( this ).find( ".usp-block-title" ).stop( true, true ).slideToggle('slow')
$( this ).find( ".usp-block-hover" ).stop( true, true ).slideToggle('slow')
});Stack Overflow用户
发布于 2017-12-05 13:18:18
可以通过使用.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')
});这将停止排队您的动画，只显示最新的，从而防止循环。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47654539
复制相关文章
相似问题
腾讯云开发者
