blocks|key|1405059|text|听起来你想要绑定到mousemove而不是悬停，而且还要为mouseout创建一个处理程序，比如$(foo).mouseout(function(){$(this).stop();})来终止动画。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1405060|entityMap^0|1C|18|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Sounds like you want to bind to mousemove not hover, but also create a handler for mouseout like <code>$(foo).mouseout(function(){$(this).stop();})</code> to terminate the animations.

blocks|key|1189840|text|我得到了我想要的方式..下面是我所做的修改："animate({marginLeft:'0px'},0)“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1189841|检查下面的代码..|1189842|$(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)+});
});|code-block|syntax|javascript|1189843|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I got it the way I wanted.. the following was the change I made
"animate({marginLeft:'0px'},0)"

Check the code below.. 

<pre><code>$(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) });
});
</code></pre>

blocks|key|1189908|text|我发现了一篇写得很好的关于悬停的平滑jquery动画的文章，这是Chris+Coyier关于CSS+Tricks的文章：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1189909|http://css-tricks.com/full-jquery-animations/|offset|length|1189910|因此，将其应用到您的代码中将如下所示：|1189911|$(".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');
});|code-block|syntax|javascript|1189912|从本质上讲，它会检查行是否被动画处理，如果没有，它才会调用鼠标输入动画。|1189913|希望您的行现在可以像本页上的最后两个示例一样生动起来：|1189914|http://css-tricks.com/examples/jQueryStop/|1189915|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|19|0|0|0|0|0|0|0|16|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|C]]|Z|$5|V|W|X|A|$Y|R]]]]

A very well written article on smooth jquery animations on hover, that I found, was this one by Chris Coyier on CSS Tricks:

<a href="http://css-tricks.com/full-jquery-animations/">http://css-tricks.com/full-jquery-animations/</a>

So fitting this to your code would look like this:

<pre><code>$(".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');
});
</code></pre>

Essentially it checks to see if the row is being animated and if it isn't, only then does it call the mouseenter animation.

Hopefully your rows will now animate somewhat like the last two examples on this page:

<a href="http://css-tricks.com/examples/jQueryStop/">http://css-tricks.com/examples/jQueryStop/</a>

blocks|key|1405216|text|jQuery为您的需求提供了特殊的eventHandlers+:)使用mouseenter和mouseleave|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1405217|$(".tabb+tr").mouseenter(
++function(){
++++$(this).find("td+#headie").animate({marginLeft:'9px'},'slow')
++});
$(".tabb+tr").mouseleave(
++function()+{
++++$(this).find("td+#headie").animate({marginLeft:'0px'},'slow')
++});|code-block|syntax|javascript|1405218|entityMap^0|Z|A|1A|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

jQuery provides special eventHandlers for your needs :)
use <code>mouseenter</code> and <code>mouseleave</code>

<pre><code>$(".tabb tr").mouseenter(
 function(){
 $(this).find("td #headie").animate({marginLeft:'9px'},'slow')
 });
$(".tabb tr").mouseleave(
 function() {
 $(this).find("td #headie").animate({marginLeft:'0px'},'slow')
 });
</code></pre>

I have a text which I want to animate when am having a mouse over it
for eg:

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

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?

Jquery Animate on Hover

jQuery

我有一个文本，当我将鼠标放在它上面时，我想要将它动画化，例如：$(".tabb tr").hover(  function(){    $(this).find("td #headie").animate({marginLeft:'9px'},'slow')  },  function() {    $(this).f...

问悬停时的Jquery动画
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问悬停时的Jquery动画EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问悬停时的Jquery动画
EN