jQuery的动画悬停

Question

我有，我想，当我具有如鼠标移到它 动画文本：

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

与这个..我有过行..表列鼠标时通过移动少动画。

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

我该如何阻止？

Answer 1

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

Answer 2

我得到了我想要的。以下是我做 变化的方式 “动画（{marginLeft： '0像素'}，0）”

检查下面的代码..

$(document).ready(function(){ 
    $(".tabb tr").mouseover(function(){ $(this).find("td #headie").animate({marginLeft:'9px'},'fast') }); 
    $(".tabb tr").mouseout(function(){ $(this).find("td #headie").animate({marginLeft:'0px'},0) }); 
}); 

Answer 3

一个上悬停光滑的jQuery动画写得很好的文章，我发现，这是一个由克里斯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 4

jQuery提供特殊的事件处理您的需求:) 使用mouseenter和mouseleave

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