悬停时的 Jquery 动画 [英] Jquery Animate on Hover

问题描述

我有一个文本，当我将鼠标悬停在它上面时，我想为其设置动画例如:

I have a text which I want to animate when am having a mouse over it for eg:

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

有了这个..当我将鼠标悬停在行上时..表格列通过少量移动来动画.

with this.. when am having mouse over the row.. the table column animates by moving little.

这里的问题是:当我在这些行上反复移动鼠标光标然后停下来看看..即使没有将鼠标移到动画上，动画也会持续一段时间.稍后它会自己移动..

Problem here is: when I move the mouse cursor repeatedly over these rows and then stop and see.. the animation keeps going on for a while even if am not moving the mouse over it. IT KEEPS MOVING ITSELF later..

我怎么能阻止它?

推荐答案

我发现的一篇关于悬停时平滑 jquery 动画的非常好的文章，是 Chris Coyier 在 CSS Tricks 上写的:

A very well written article on smooth jquery animations on hover, that I found, was this one by Chris Coyier on CSS Tricks:

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

因此将其拟合到您的代码中将如下所示:

So fitting this to your code would look like this:

$(".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 动画.

Essentially it checks to see if the row is being animated and if it isn't, only then does it call the mouseenter animation.

希望您的行现在可以像本页上的最后两个示例一样具有动画效果:

Hopefully your rows will now animate somewhat like the last two examples on this page:

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

这篇关于悬停时的 Jquery 动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！