悬停时的 Jquery 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1747039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Animate on Hover
提问by Deepak
I have a text which I want to animate when am having a mouse over it for eg:
我有一个文本，当我将鼠标悬停在它上面时，我想对其进行动画处理，例如：
$(".tabb tr").hover(
function(){
$(this).find("td #headie").animate({marginLeft:'9px'},'slow')
},
function() {
$(this).find("td #headie").animate({marginLeft:'0px'},'slow')
});
with this.. when am having mouse over the row.. the table column animates by moving little.
有了这个..当我将鼠标悬停在该行上时..表格列通过稍微移动来实现动画效果。
Problem here is: when I move the mouse cursor repeatedly over these rows and then stop and see.. the animation keeps going on for a while even if am not moving the mouse over it. IT KEEPS MOVING ITSELF later..
这里的问题是：当我在这些行上反复移动鼠标光标然后停下来看看..即使没有将鼠标移到动画上，动画也会持续一段时间。稍后它会继续移动..
how can I stop that?
我怎么能阻止呢？
回答by Max G J Panas
A very well written article on smooth jquery animations on hover, that I found, was this one by Chris Coyier on CSS Tricks:
我发现一篇关于悬停时平滑 jquery 动画的文章写得非常好，这是 Chris Coyier 在 CSS Tricks 上的一篇文章：
http://css-tricks.com/full-jquery-animations/
http://css-tricks.com/full-jquery-animations/
So fitting this to your code would look like this:
因此，将其拟合到您的代码将如下所示：
$(".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');
});
Essentially it checks to see if the row is being animated and if it isn't, only then does it call the mouseenter animation.
本质上，它会检查该行是否正在被动画化，如果没有，它才会调用 mouseenter 动画。
Hopefully your rows will now animate somewhat like the last two examples on this page:
希望您的行现在可以像此页面上的最后两个示例一样具有动画效果：
回答by Deepak
I got it the way I wanted.. the following was the change I made "animate({marginLeft:'0px'},0)"
我按照我想要的方式得到了它……以下是我所做的更改“animate({marginLeft:'0px'},0)”
Check the code below..
检查下面的代码..
$(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) });
});
回答by annakata
Sounds like you want to bind to mousemove not hover, but also create a handler for mouseout like $(foo).mouseout(function(){$(this).stop();})to terminate the animations.
听起来你想绑定到 mousemove 而不是悬停，而且还要为 mouseout 创建一个处理程序，比如$(foo).mouseout(function(){$(this).stop();})终止动画。
回答by 1b0t
jQuery provides special eventHandlers for your needs :)
use mouseenterand mouseleave
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')
});
