悬停时的 Jquery 动画答案

【问题标题】：Jquery Animate on Hover悬停时的 Jquery 动画
【发布时间】：2010-12-17 08:25:07
【问题描述】：

我有一个文本，当我将鼠标悬停在它上面时，我想对其进行动画处理例如：

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

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

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

我怎样才能阻止它？

【问题讨论】：

标签： jquery animation hover

【解决方案1】：

我发现一篇写得很好的关于悬停时流畅的 jquery 动画的文章是 Chris Coyier 在 CSS Tricks 上写的：

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/

【讨论】：

【解决方案2】：

我得到了我想要的方式..以下是我所做的更改 “动画（{marginLeft:'0px'},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) });
});

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

jQuery 为您的需要提供了特殊的 eventHandlers :) 使用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')
  });

【讨论】：