<div id="box" style="background: #98bf21;height:100px;width:100px;margin:6px;"> 测试文字 </div> <button class="btn1">Animate</button> <button class="btn2">Reset</button> <script> $(function(){ $(".btn1").click(function(){ $("#box").animate({ //字体变为三倍 fontSize:'3em', opacity:'0.5', // 你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动 margin:"+=50px", height:"+=300px" }, 5000, "swing", function(){ alert("先执行完效果，在执行回调函数1"); }); }); $(".btn2").click(function(){ $("#box").animate({ fontSize:'1em', opacity:'1', margin:"6px", height:"100px" }, 5000, "swing", function(){ alert("先执行完效果，在执行回调函数"); }); }); }); </script>
在网上找的api ，个人觉得是要注意其可以执行效果的参数
参数 描述 styles必需。规定产生动画效果的一个或多个 CSS 属性/值。
注意： 当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。
可以应用动画的属性：
backgroundPositionXbackgroundPositionYborderWidthborderBottomWidthborderLeftWidthborderRightWidthborderTopWidthborderSpacingmarginmarginBottommarginLeftmarginRightmarginTopoutlineWidthpaddingpaddingBottompaddingLeftpaddingRightpaddingTopheightwidthmaxHeightmaxWidthminHeightminWidthfontSizebottomleftrighttopletterSpacingwordSpacinglineHeighttextIndent 提示：颜色动画不包含在核心 jQuery 库中。如果您想要应用动画颜色，您需要从 jQuery.com 下载 颜色动画插件。speed可选。规定动画的速度。可能的值：
毫秒"slow""fast" easing可选。规定在动画的不同点中元素的速度。默认值是 "swing"。可能的值：
"swing" - 在开头/结尾移动慢，在中间移动快"linear" - 匀速移动 提示：扩展插件中提供更多可用的 easing 函数。callback可选。animate 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。可能的值：
speed - 设置动画的速度easing - 规定要使用的 easing 函数callback - 规定动画完成之后要执行的函数step - 规定动画的每一步完成之后要执行的函数queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始。specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
