<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<script src="../../JQuery/jquery-2.1.4.min.js"></script>--> <script src="../../JQuery/jquery-1.4.2.min.js"></script> <link href="../../CSS/2-7.css" rel="stylesheet" /> <title>使用animate实现动画效果</title> <script type="text/javascript"> $(function () { $("#btn").click(function () { $("#box").animate({ height: "500px" }); //此方法操作div，可以使div样式不会还原，操作span则会在动画效果完成后还原之前样式。 } ) $(".btn1").click(function () { $("#box").animate({ height: "300px" }); //此方法操作div，可以使div样式不会还原，操作span则会在动画效果完成后还原之前样式。 } ) }) </script> </head> <body> <div> <span id="spnMove">Span Move</span> </div> <div id="box" style="background: #98bf21; height: 100px; width: 100px; margin: 6px;"></div> <button class="btn1">Animate</button> <input type="button" id="btn" value="animate" /> </body> </html>
原文：http://www.cnblogs.com/zhaomengmeng/p/4681970.html