基本动画操作--animate(),stop()函数的效果应用:(自己参考菜鸟教程网站进行学习,点击,进行学习·····)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #dv{ height: 50px; width:50px; background-color: #FF0000; } </style> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("#dv").animate( { "width":"300px", "height":"300px", "left":"300px", },1000,function(){ $("#dv").animate({ "width":"50px", "height":"50px", "left":"1000px", "top":"300px" },1000)} ); }); $("#btn2").click(function(){ $("#dv").stop(); }) }) </script> </head> <body> <h1>基本动画操作--animate(),stop()函数的效果应用</h1> <hr > <input type="button" name="" id="btn1" value="显示动画效果" /> <input type="button" name="" id="btn2" value="暂停动画效果" /> <hr > <div id="dv"> </div> </body> </html>
运行结果:
以后截动态运行结果图·································敬请期待······················
Nearth===>WEB前端--第18课/JQuery/基本动画操作--animate(),stop()函数的效果应用
最新推荐文章于 2019-11-16 17:30:09 发布