相关知识
| jquery方法 | 作用 | 参数 | 举例 |
|---|---|---|---|
| delay | 设置动画队列中两次动画之间的间隔时间（delay函数后的动画被延迟） | 毫秒数 | $("#img").delay(2000).fadeIn() |
| stop | 停止当前正在运行的动画（即直接完成该动画最终效果），执行下一个动画 | stopAll：是否清除动画队列 * false(默认)，只停止当前动画，立即执行下一动画 * true，立即停止整个动画队列 goToEnd：是否立即完成当前动画（是否将当前动画的CSS属性值跳转到目标值） * false(默认)下一动画从停止时刻的属性值开始变化 * true，当下一动画从前一动画的目标值开始变化 | $("#img").fadeOut(5000).stop() |
| finish | 停止当前动画，删除当前绑定元素的动画队列中的所有动画,并使所有排队的动画的CSS属性跳转到他们的目标值 | queueName： 动画队列名称，默认为fx | $("#img").animate({...}).animate({...}).finish() |
效果
- 延迟动画（delay）：动画开始立即右移变大，1s后下移，0.5s后左移变小，1s后上移，0.5s后收起，1s后展开
- 停止动画（stop）：动画同上，当点击按钮时，停止当前动画直接达到目标值，进行下一步动画
- 移除动画（finishOne）：点击按钮时，立刻停止并清除第一张图片的动画效果
- 移除动画（finishTwo）
- 先点击finishOne，清除第一张图片的动画效果，再点击finishTwo清除第二张图片的动画效果
- 点击按钮时，立刻停止并清除两张图片的动画效果
- 先点击finishOne，清除第一张图片的动画效果，再点击finishTwo清除第二张图片的动画效果
注意事项
当点击“finishOne”停止第一张图片的动画，立刻点击“delay动画”，第一张图片会立刻执行新的动画，第二张图片会在第一轮动画执行完成后再执行新一轮的动画，这会导致两张图片动画顺序的不一致。此时点击“stop停止动画”，会对两张图片都有效果。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery-动画停止与延时</title>
<script type="text/javascript" src="../js/jquery-3.7.1.js"></script>
<style type="text/css">
img{
width: 150px;
height: 150px;
margin: 20px;
position: relative;
}
</style>
</head>
<body>
<div class="button-box">
<input type="button" value="delay动画" id="delayBtn">
<input type="button" value="stop停止动画" id="stopBtn">
<input type="button" value="finishOne" id="finishOneBtn">
<input type="button" value="finishTwo" id="finishTwoBtn">
</div>
<div id="showImg">
<img src="../images/jquery-animateDelay/1.jpg" alt="">
<img src="../images/jquery-animateDelay/2.jpg" alt="">
</div>
<script type="text/javascript">
// 延迟动画
$("#delayBtn").click(function(){
// 动画队列
// 右移变大
$("#showImg img").animate({
left: '100px',
width: '+=50px',
height: '+=100px'
})
// 下移
.delay(1000).animate({
top: '200px'
})
// 左移变小
.delay(500).animate({
left: '0px',
width: '-=50px',
height: '-=100px'
})
// 上移
.delay(1000).animate({
top: '0px'
})
// 收起
.delay(500).slideUp("slow")
// 展开
.delay(1000).slideDown("fast");
});
// stop停止当前正在运行的动画，执行队列中下一个动画
// 可以清除delay效果
$("#stopBtn").click(function(){
$("#showImg img").stop(false,true);
});
// finish停止当前动画（第一张图片），并清空动画队列
$("#finishOneBtn").click(function(){
$("#showImg img:first").finish();
})
// finish停止当前动画（两张图片），并清空动画队列
$("#finishTwoBtn").click(function(){
$("#showImg img").finish();
})
</script>
</body>
</html>
