JQuery中鼠标离开时停止悬停动画

Stop .hover animation when the mouse leaves in JQuery

本文关键字：悬停 动画 鼠标 离开 JQuery      更新时间：2023-09-26

我有一些像:

$('.test').hover(
 function(){
  $(this).animate(...);
 }, function(){
  $(this).animate(...);
 }
);

但是如果用户的鼠标在动画结束之前离开，动画将继续。如果我快速且反复地悬停和移除元素，动画会在鼠标离开元素后重复几次。如何使动画在鼠标离开元素后停止?

您要查找的是stop():

$('.test').hover(
 function(){
  $(this).stop(true).animate(...);
 }, function(){
  $(this).stop(true).animate(...);
 }
);

有两个可选的布尔参数。第一个是clearQueue。如果设置为false(或省略)，则更像是暂停动画而不是停止动画。下次在该对象上启动动画时，它将在继续之前完成暂停的动画和任何其他排队的动画。在你的情况下，你希望它是true，这将告诉它实际上停止动画并清除任何排队的动作。

第二个可选参数为jumpToEnd。如果是false(或省略)，动画将停止在其轨道上。如果是true，它将在动画结束时跳转到对象所在的状态。你可能想要忽略这个，尽管它取决于你正在做什么类型的动画。

例如，假设你正在从0%不透明度淡出到100%不透明度，当你调用stop()时，你的不透明度是75%，然后你调用一个淡出到0%不透明度。如果没有clearQueue，对象将继续褪色到100%，然后褪色回0%。使用clearQueue，对象将在75%时停止褪色，然后立即开始褪色回0%。如果jumpToEnd为true，则对象的不透明度将立即从75%变为100%，然后逐渐变回0%。

相关文章：