Jquery Animate on Hover

Question

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?

Answer 1

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.

Answer 2

Thanks for your quick reply I tried this $(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'},'fast') });

});

this is what am using now.. as you said.. can you please let me know where exactly i should add stop() function to this code

Answer 3

Hi.. 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) });

});