jQuery Animation manchmal nicht vollständig vollständige

Question

$("p").mouseenter(function() { 
 
    $("p").stop(true).animate({ 
 
\t left: '+=100px', 
 
    },1000); 
 
}); 
 
\t 
 
\t 
 
$("p").mouseleave(function() { 
 
    $("p").stop(true).delay(100).animate({ 
 
     left: '-=100px', 
 
    },1000); 
 
});

p{ 
 
    position: relative; 
 
    left: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>Text</p>

ich einen laufenden Panne gehabt haben, während die animate Funktion jQuery verwenden. Wenn ich meinen Cursor schnell betrete und wieder verlasse, in das Element, an das die Animate-Funktion angehängt ist; Die Animation ist unvollständig. Dies kann eine unklare Erklärung sein; also habe ich per Code gepostet. Versuchen Sie schnell, den Cursor in die p einzugeben und damit zu spielen, um zu sehen, wie es stört.

Answer 1

Auf mouseleave Satz links nach 5px statt minus 100px, was auch immer die Position des Textes jeder Zeit auf der Maus lassen Sie es -100px die irgendwann Text gehen muss versteckt, so ist es besser, dass bei der ersten zugewiesenen Wert zu stoppen.

$("p").mouseenter(function() { 
 
    $("p").stop(true).animate({ 
 
\t left: '+=100px', 
 
    },1000); 
 
}); 
 
\t 
 
\t 
 
$("p").mouseleave(function() { 
 
    $("p").stop(true).delay(100).animate({ 
 
     left: '5px',//Change this 
 
    },1000); 
 
});

p{ 
 
    position: relative; 
 
    left: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Text</p>

Answer 2

Hier gehen Sie mit der Lösung https://jsfiddle.net/77oar74e/

$("p").mouseenter(function() { 
 
    $("p").stop(true).animate({ 
 
\t left: '+=100px', 
 
    },1000); 
 
}); 
 
\t 
 
\t 
 
$("p").mouseleave(function() { 
 
    $("p").stop(true).delay(100).animate({ 
 
     left: '5px', 
 
    },1000); 
 
});

p{ 
 
    position: relative; 
 
    left: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Text</p>