<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="前端课件/jQuery/jquery-3.3.1.min.js"></script> <style type="text/css"> .div_1{width: 100px;height: 100px;background: red;margin-top: 30px;position: absolute;} </style> </head> <body> <script> $(document).ready(function(){ $('.div_1').mousedown(function(){ $('.div_1').animate({left:'200px'},1000) $('.div_1').animate({top:'200px'},1000) $('.div_1').animate({left:'8px',opacity:'0.5'},1000) $('.div_1').animate({top:'8px',opacity:'0.5'},1000) }) }) </script> <div class="div_1"></div> </body> </html>
animate({params},speed,fn)需要记住这个语法,结合各种jQuery事件方法可以完美的实现自己想要的动画。