CODEWITHSUNDEEP
jqueryanimation
MullerA
MullerA

Reputation: 387

jQuery animation sometimes fails to fully complete

$("p").mouseenter(function() {
     $("p").stop( true ).animate({
	left: '+=100px',
     },1000);
});
	
	
$("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>

I've had a running glitch while using the jQuery animate function. If I quickly enter and exit my cursor into the element onto which the animate function is attached; the animation is incomplete. This may be an unclear explanation; so I've posted by code. Try quickly entering your cursor into the p and playing with it to see how it glitches.

Upvotes: 0

Views: 39

Answers (2)

frnt
frnt

Reputation: 8795

On mouseleave set left to 5px instead of minus 100px, every-time on mouse leave whatsoever the position of text it has to go -100px which sometime hides text, so it's better to stop that at initial assigned value. 

$("p").mouseenter(function() {
     $("p").stop( true ).animate({
	left: '+=100px',
     },1000);
});
	
	
$("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>

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

Here you go with the solution https://jsfiddle.net/77oar74e/

$("p").mouseenter(function() {
     $("p").stop( true ).animate({
	left: '+=100px',
     },1000);
});
	
	
$("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>

Upvotes: 1

Related Questions