首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >悬停时的Jquery动画

悬停时的Jquery动画
EN

Stack Overflow用户
提问于 2009-11-17 14:52:29
回答 4查看 88.3K关注 0票数 18

我有一个文本,当我将鼠标放在它上面时,我想要将它动画化,例如:

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

有了这个..。当我将鼠标放在行上时..表列移动很少,从而产生动画效果。

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

我怎么才能阻止它呢?

EN

回答 4

Stack Overflow用户

发布于 2012-03-07 06:13:36

我发现了一篇写得很好的关于悬停的平滑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');
});

从本质上讲,它会检查行是否被动画处理,如果没有,它才会调用鼠标输入动画。

希望您的行现在可以像本页上的最后两个示例一样生动起来:

http://css-tricks.com/examples/jQueryStop/

票数 36
EN

Stack Overflow用户

发布于 2009-11-17 19:45:04

我得到了我想要的方式..下面是我所做的修改:"animate({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
EN

Stack Overflow用户

发布于 2009-11-17 14:57:19

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1747039

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档