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 determ...
本节内容：
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 函数。
例子：
jquery animate动画函数-www.
div { margin:3px; width:40px; height:40px;background-color:#FCC; display:none; text-align:right; }
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();
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。