jQuery动画有时无法完全完成

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

<p>Text</p>

＆＃13;

＆＃13;

＆＃13;

使用jQuery animate函数时，我遇到了运行故障。如果我快速进入并退出光标到附加了animate功能的元素;动画不完整。这可能是一个不明确的解释;所以我发布了代码。尝试快速将光标输入p并使用它来查看它是如何出现故障。

Answer 1

在mouseleave左侧设置为5px而不是减去100px，鼠标每次都会离开文本的位置-100px，有时隐藏文字，所以最好在初始指定值时停止它。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用解决方案https://jsfiddle.net/77oar74e/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;