<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate动画</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ // 类似于原生animation动画. 属性变动产生动画. $('.div1').click(function(){ $(this).animate({"width":500},100,function(){ $(this).animate({"height":500},100,function(){ $(this).animate({"backgroundColor":"red"}) }) }) }) /* 1.animate语句和css().语句一样, 可以直接调用style属性, 且调用过程当中都需要用大括号包含所调用内容. 2.animate参数可跟三个, ({"1.style属性":'属性的参数',"另一个属性":"另一个属性的参数"},动画持续时间,动画结束后调用的函数) 三个参数分别用,隔开. 3.animate无法调用背景颜色参数. 4.animate内, 和css(). 一样, 可以在style参数后面直接写数字,不用加单位和引号 */ $('.div2').click(function(){ $(this).animate({'width':'+=100px'}) }) }) </script> <style> .div1{ width: 300px; height: 100px; margin: 50px auto; background-color: gold; } .div2{ width: 300px; height: 100px; background-color: gold; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>