使用animate()来完成 比如： 1.逐渐扩大 1）宽高都扩为200px 2)宽先阔为200px,高后扩为200px 2移动到指定位置 1）移动到（500，100处） 2）移动到（100，20处） 3.移动指定距离 1）移动距离为（100，50） 2）移动距离为（-100，-20） 4.停止动画：使用stop()来停止动画 示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义动画</title> <style type="text/css"> *{ margin: 0; padding: 0; } #div1{ position: absolute; width: 100px; height: 100px; top: 50px; left: 300px; background-color: #00FFFF; } </style> <script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script> <script type="text/javascript"> $(function(){ var $div1 = $("#div1"); $("#btn1").click(function(){ //1.1 // $div1.animate({ // // width:200, // height:200 // },2000); //1.2 $div1.animate({ width:200, }).animate({ height:200, }); }); $("#btn2").click(function(){ //2.1 // $div1.animate({ // left:500, // top:100, // }); //2.2 $div1.animate({ left:100, top:20, },1000); }); $("#btn3").click(function(){ //3.1 // $div1.animate({ // left:"+=100", // top:"+=50" // }); //3.2 $div1.animate({ left:"-=100", top:"-=50", }); }); $("#btn4").click(function(){ $div1.stop(); }); }); </script> </head> <body> <button id="btn1">逐渐扩大</button> <button id="btn2">移动到指定位置</button> <button id="btn3">移动指定距离</button> <button id="btn4">停止动画</button> <div id="div1">热爱可抵岁月漫长</div> </body> </html>