jQuery 动画笔记

「爱情、让人受尽委屈。」 2023-05-29 03:24 18阅读 0赞

# `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)
    			});
    		});

# 参考资料 #

[https://www.jquery123.com/category/effects/][https_www.jquery123.com_category_effects]

[https_www.jquery123.com_category_effects]: https://www.jquery123.com/category/effects/