当鼠标离开JQuery时停止.hover动画

Question

我有类似的东西:

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

但是,如果用户的鼠标在动画结束前离开,则动画将继续.如果我快速重复地快速悬停和取消悬停元素,则在鼠标离开元素后动画会重复几次.鼠标离开元素后,如何让动画停止？

Answer 1

你正在寻找stop():

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

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

第二个可选参数是jumpToEnd.如果false(或省略),动画将在其轨道中停止.如果true,它将跳转到动画结束时对象所处的状态.你可能想把这个留下来,虽然这取决于你正在做什么类型的动画.

例如,假设您从0%不透明度渐变到100%不透明度,并且在调用时不透明度为75%stop(),那么您将淡入淡出调用为0%不透明度.没有clearQueue,对象将继续淡入100%然后淡出0%.使用时clearQueue,对象将停止在75%处褪色,然后立即开始淡化为0%.如果jumpToEnd为true,则对象将立即从75%变为100%不透明度,然后再回到0%.