悬停上的Jquery Animate

Question

我有一个文本,我想动画当鼠标在它上面时,例如:

$(".tabb tr").hover(
  function(){
    $(this).find("td #headie").animate({marginLeft:'9px'},'slow')
  },
  function() {
    $(this).find("td #headie").animate({marginLeft:'0px'},'slow')
  });

有了这个..当鼠标悬停在行上时...表格列通过移动动画小动画.

这里的问题是:当我在这些行上重复移动鼠标光标然后停止并看到..即使没有将鼠标移到它上面,动画也会持续一段时间.以后它会自动移动..

我怎么能阻止它？

Answer 1

我发现,关于悬停的平滑jquery动画的一篇非常好的文章是由Chris Coyier撰写的关于CSS技巧的文章:

http://css-tricks.com/full-jquery-animations/

所以这适合你的代码看起来像这样:

$(".tabb tr").hover(
function(){
  $(this).filter(':not(:animated)').animate({
     marginLeft:'9px'
  },'slow');
// This only fires if the row is not undergoing an animation when you mouseover it
},
function() {
  $(this).animate({
     marginLeft:'0px'
  },'slow');
});

本质上,它会检查行是否正在动画,如果不是动画,那么它才会调用mouseenter动画.

希望您的行现在有点像本页上的最后两个示例:

http://css-tricks.com/examples/jQueryStop/

Answer 2

听起来你想绑定到 mousemove 而不是悬停，但也为 mouseout 创建一个处理程序，例如$(foo).mouseout(function(){$(this).stop();})终止动画。