jQuery 动画笔记
程序员文章站
2022-03-16 19:01:52
...
animate基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="playBtn">play</button>
<button id="stopBtn">stop</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
<script>
$(document).ready(function(){
$("#playBtn").click(function(){
// 三个动画顺序播放
$("#box").animate({height:"300px"},3000)
.animate({width:"500px"},3000)
.animate({opacity:"0.1"}, 3000, ()=> alert("动画完成执行回调 666，用stop()终断动画，回调不会执行"))
});
$("#stopBtn").click(function(){
//$("#box").stop(); // 停止当前动画，开始下一个
//$("#box").stop(false,true); // 结束当前动画，开始下一个
$("#box").stop(true,true); // 结束当前动画，清除队列中尚未执行的动画
});
});
</script>
</body>
</html>
delay基本用法
还是三个动画顺序播放，但先首先延时1秒。
$(document).ready(function(){
$("#playBtn").click(function(){
// 还是三个动画顺序播放，但先首先延时1秒。
$("#box").delay(1000)
.animate({height:"300px"},3000)
.animate({width:"500px"},3000)
.animate({opacity:"0.1"}, 3000, ()=> alert("动画完成执行回调 666"))
});
$("#stopBtn").click(function(){
//$("#box").stop(); // 停止当前动画，开始下一个
//$("#box").stop(false,true); // 结束当前动画，开始下一个
$("#box").stop(false,false); // 跳过当前动画，继续下一个。
$("#box").stop(true,true); // 结束当前动画，清除队列中尚未执行的动画
});
});
finish基本用法
触发队列中每个动画的回调，并完成每一个动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="playBtn">play</button>
<button id="stopBtn">stop</button>
<button id="finishedBtn">finished</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
<script>
$(document).ready(function(){
$("#playBtn").click(function(){
// 三个动画顺序播放
$("#box")
.animate({height:"300px"},3000)
.animate({width:"500px"},3000)
.animate({opacity:"0.1"}, 3000, ()=> alert("动画完成执行回调 666"))
});
$("#stopBtn").click(function(){
$("#box").stop(true,true); // 结束当前动画，清除队列中尚未执行的动画
});
$("#finishedBtn").click(function(){
$("#box").finish(); // 直接跳掉动画序列末尾，触发回调，然后完成动画。
});
});
</script>
</body>
</html>
+=实现相对变化
$(document).ready(function(){
$("#playBtn").click(function(){
$("#box").animate({height:"+=50px"},200)
});
});
参考资料
上一篇： 9.1、@keyframes关键帧
下一篇： 帧动画