我有一个文本,当我将鼠标放在它上面时,我想要将它动画化,例如:
$(".tabb tr").hover(
function(){
$(this).find("td #headie").animate({marginLeft:'9px'},'slow')
},
function() {
$(this).find("td #headie").animate({marginLeft:'0px'},'slow')
});
有了这个..。当我将鼠标放在行上时..表列移动很少,从而产生动画效果。
这里的问题是:当我将鼠标光标反复移动到这些行上,然后停下来查看..即使我没有将鼠标移动到动画上,动画也会持续一段时间。之后它会自动移动..
我怎么才能阻止它呢?
发布于 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');
});
从本质上讲,它会检查行是否被动画处理,如果没有,它才会调用鼠标输入动画。
希望您的行现在可以像本页上的最后两个示例一样生动起来:
发布于 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) });
});
发布于 2009-11-17 14:57:19
听起来你想要绑定到mousemove而不是悬停,而且还要为mouseout创建一个处理程序,比如$(foo).mouseout(function(){$(this).stop();})
来终止动画。
https://stackoverflow.com/questions/1747039
复制相似问题