防止循环悬停效应
防止循环悬停效应
提问于 2017-12-05 05: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 05: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 05: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
复制
相似问题
CSS悬停状态-循环效应
防止从错误元素触发的悬停效应
jquery悬停气泡导致循环闪烁效应
悬停效应
如何防止jquery悬停效应的启动和关闭
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
