悬停时的 Jquery 动画

Posted 2023-05-08

【中文标题】悬停时的 Jquery 动画

【英文标题】：Jquery Animate on Hover

【发布时间】：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')
  );

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

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

我怎样才能阻止它？

【参考方案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')
  );