Question

我有一个文字，我想在鼠标悬停时制作动画例如：

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

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

这里的问题是：当我在这些行上重复移动鼠标光标然后停止并看到..即使没有将鼠标移到它上面，动画也会持续一段时间。以后它会继续发挥自己的作用..

我怎么能阻止它？

Answer 1

我发现，关于悬停的平滑jquery动画的一篇非常好的文章是由Chris 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 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

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

Answer 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')
  });

悬停上的Jquery Animate

4 个答案: