Jquery Animate on Hover

I have a text which I want to 开发者_JS百科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?

---

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

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.

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

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

---

I got it the way I wanted.. the following was the change I made "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) });
});

---

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.

---

jQuery provides special eventHandlers for your needs :) use mouseenter and 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')
  });