abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自定义动画</title> <script src=&
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自定义动画</title> <script src="jquery-3.3.1.min.js"></script> <style type="text/css"> button{padding:5px 5px;margin:5px 5px;} </style> <script> $(document).ready(function(){ $('.start').click(function(){ function startAni(){ $('div').animate({height:300},"slow"); $('div').animate({width:300},"slow"); $('div').css("background-color","blue"); $('div').animate({height:100},"slow"); $('div').animate({width:100},"slow"); } startAni(); }); $('.stop').click(function(){ $('div').stop() }) $('.stopall').click(function(){ $('div').stop(true,true) }) }); </script> </head> <body> <button class="start">开始动画</button><button class="stop">结束当前动画</button><button class="stopall">结束所有动画</button> <div style="width:50px;height:50px;position:absolute;left:10px;top:50px;background-color:red;"></div> </body> </html>
动画队列停止当前 及全部停止的测试,学完动画之后感觉好晕啦,一点没有记住似的,看了好几遍。
Correcting teacher:灭绝师太Correction time:2018-11-23 13:42:11
Teacher's summary:没事啦,多敲几遍就好了,用两遍就熟练啦!