jQuery 动画笔记
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/
男娘i
小灰灰
「爱情、让人受尽委屈。」
Bertha 。
还没有评论，来说两句吧...