abstract:<!DOCTYPE html> <html> <head> <title>jQuery的animate()方法来自定义动画</title> <script type="text/javascript" src="jquery-3.3.1.min.js">
<!DOCTYPE html> <html> <head> <title>jQuery的animate()方法来自定义动画</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> div{width: 200px;height: 200px;background: red;position: absolute;} </style> <script type="text/javascript"> //在jQuery中用 animate()方法来自定义动画 //语法:$(selector).animate({params},speed,fn); //params参数定义形成动画的css属性是必需的 $(document).ready(function () { $('.bt1').click(function () { $('p').animate({fontSize:'40px'},1500); //属性名称中有-的,全部写成驼峰写法 }) $('.bt2').click(function () { $('div').animate({left:'200px',top:'200px',background:'blue'},1500) }) }) </script> </head> <body> <button class="bt1">点击字体放大</button> <p>444444444点击字体放大44444444444</p> <button class="bt2">点击移动DIV</button> <div></div> </body> </html>