先看一下官方对此方法的介绍
官方地址 http://api.jquery.com/animate/
-
.animate( properties, [duration,] [easing,] [complete] ) version added: 1.0
properties A map of CSS properties that the animation will move toward.
duration A string or number determining how long the animation will run.
easing A string indicating which easing function to use for the transition.
complete A function to call once the animation is complete.
-
.animate( properties, options ) version added: 1.0
properties A map of CSS properties that the animation will move toward.
options A map of additional options to pass to the method. Supported keys:
duration: A string or number determining how long the animation will run.(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing: A string indicating which easing function to use for the transition.(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
complete: A function to call once the animation is complete.在动画完成时执行的函数
step: A function to be called after each step of the animation.在动画每一步执行的函数queue: A Boolean indicating whether to place the animation in the effects queue. Iffalse, the animation will begin immediately.(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
一个例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div { margin:3px; width:40px; height:40px;background-color:#FCC; display:none; text-align:right; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="t1">嘿嘿</div>
<script>
function runIt() {
$("#t1").animate({ '80%'}, "3000", "swing",function(){$("#t1").html($("#t1").width());});
$('#t1').animate({ '50%',opacity: .5},{duration:'3000',easing:"swing",
step: function(now, fx) {
var data = fx.elem.id + '---' + fx.prop + ': ' + now;
$('#t1').html(data );
},
complete:function(){
$('#t1').append('--|--complete--|--');
}
});
}
runIt();
</script>
</body>
</html>