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的动画非常写得很好的文章，我发现，这是一个接克里斯Coyier对CSS技巧：

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

<一个href=\"http://css-tricks.com/full-jquery-animations/\">http://css-tricks.com/full-jquery-animations/

所以装修给你的code是这样的：

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屋！