demo.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: black; } </style> <script src="jquery-1.11.1.js"></script> <!--JQuery 动画不支持背景色的变化--> <script src="jquery.color.js"></script> <!--JQuery第三方插件,支持改变背景色的动画插件。要先引入JQuery再引入插件--> <script> $(function () { //获取按钮,改变盒子的背景色; $("button").on("click", function () { $("div").animate({"width":200,"background-color":"red"},2000, function () { alert("动画结束"); }); }); }) </script> </head> <body> <button>变色</button> <div></div> </body> </html>