我按下按钮之后，动画正常进行，我把鼠标放在动画上面的时候，动画就停止了。我现在的问题就是，我把鼠标移开动画区域的时候，怎样才能让动画继续运行，是从停止时的那个状态继续运行，不是重新开始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery特效</title>
<script src="jquery-3.4.1.js"></script>
<style>
div{
border: 1px solid blue;
padding: 20px 50px;
width: 300px;
height: 200px;
color: red;
position: relative;
}
</style>
</head>
<body>
<button type="button" id="btn8" class="btn">动画效果</button>
<br>
<div >这是动画栏</div>
<script>
$(document).ready(function () {
//更改动画
//一定要在格式中添加位置属性 默认为: position:relative
$("#btn8").click(function () {
$("div").animate({
left:"+=200",
top:"+=200"
},2000);
$("div").animate({
left:"+=200",
top: "-=200"
},2000);
$("div").animate({
left:"-=200",
top: "-=200"
},2000);
$("div").animate({
left:"-=200",
top: "+=200"
},2000);
})
//当鼠标停在动画框时停止动画
$("div").hover(function () {
$("div").stop(true,false)
$("div").text("当前动画框静止！")
})
//鼠标离开动画框之后继续播放动画
$("div").mouseleave(function () {
$("div").text("这是动画栏！")
})
})
</script>
</body>
</html>
<script>
$(document).ready(function () {
//更改动画
//一定要在格式中添加位置属性 默认为: position:relative
$("#btn8").click(function () {
animate_test();
//当鼠标停在动画框时停止动画
$("div").hover(function () {
$("div").stop(true,false);
$("div").text("当前动画框静止！")
},function(){
if(!$("div").is(":animated")){ //判断元素是否正处于动画状态
$("div").text("这是动画栏！");
animate_test();
}
})
})
function animate_test(){
$("div").animate({
left:"+=200",
top:"+=200"
},2000);
$("div").animate({
left:"+=200",
top: "-=200"
},2000);
$("div").animate({
left:"-=200",
top: "-=200"
},2000);
$("div").animate({
left:"-=200",
top: "+=200"
},2000);
}
})
</script>
再加一个gotoAndPlay()
就是点击按钮后开始从第几帧播放