JQuery Animate auf Hover

Question

Ich habe einen Text, den ich animieren möchten, wenn eine Maus über sie habe für zB:

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

mit diesem .., wenn die Maus mit bin über die Reihe .. die Tabellenspalte animiert durch kleine Bewegung.

Problem hier ist: wenn ich den Mauszeiger wiederholt über diese Zeilen bewege und dann stoppe und sehe .. die Animation läuft eine Weile weiter, auch wenn ich die Maus nicht darüber bewege. IT BEWEGT SICH SELBST später ..

Wie kann ich das stoppen?

Answer 1

Klingt, als ob Sie an mousemove binden möchten nicht Hover, sondern auch einen Handler für mouseout wie $(foo).mouseout(function(){$(this).stop();}) erstellen, um die Animationen zu beenden.

Answer 2

Ich habe es so, wie ich .. folgende wollte die Änderung war ich gemacht "belebte ({margin: '0px'}, 0)"

den Code prüfen ..

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

Answer 3

Ein sehr gut geschriebener Artikel auf glatten jquery Animationen auf schweben, dass ich fand, war dies eine von Chris Coyier auf CSS Tricks:

http://css-tricks.com/full-jquery-animations/

passend, dies zu Ihrem Code So würde wie folgt aussehen:

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

Im Wesentlichen überprüft er, ob die Zeile animiert wird, und wenn es nicht, nur dann ist es die MouseEnter- Animation nennen.

Hoffentlich Ihre Zeilen wird nun etwas wie die letzten beiden Beispiele auf dieser Seite animieren:

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

Answer 4

jQuery bietet spezielle Eventhandler für Ihre Bedürfnisse :) Verwendung mouseenter und 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') 
    });