jquery animate动画函数用法举例
本节内容：
jquery animate动画函数的用法
Jquery animate 官方地址 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. If false, 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>jquery animate动画函数-www.jbxue.com</title>
<style>
div { margin:3px; width:40px; height:40px;background-color:#FCC; display:none; text-align:right; }
</style>
<script src="/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="t1">jquery animate动画函数</div>
<script>
function runIt() {
$("#t1").animate({width: '80%'}, "3000", "swing",function(){$("#t1").html($("#t1").width());});
$('#t1').animate({width: '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>
您可能感兴趣的文章：
jquery animate创建动画的小例子
jquery animate动画函数用法举例
细说 jQuery 样式篇（二） – 动画效果
Jquery动画animate方法的实例讲解
jquery animate动画方法使用介绍
jquery animate动画函数用法浅析
Jquery 自定义动画概述及示例
jQuery动画效果animate和scrollTop结合使用实例
jQuery动画animate方法实例分享
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）