jquery animate 动画效果使用说明

animate( params, [duration], [easing], [callback] ) 
用于建立自定义动画的函数。 
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每一个属性都表示一个能够变化的样式属性(如“height”、“top”或“opacity”)。注意:全部指定的属性必须用骆驼形式,好比用marginLeft代替margin-left. 
而每一个属性的值表示这个样式属性到多少时动画结束。若是是一个数值,样式属性就会从当前的值渐变到指定的值。若是使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。 
jQuery 1.2 中,你可使用 em 和 % 单位。另外,在 jQuery 1.2 中,你能够经过在属性值前面指定 "+=" 或 "-=" 来让元素作相对运动。 
jQuery 1.3中,若是duration设为0则直接完成动画。而在之前版本中则会执行默认动画。 
点击按钮后div元素的几个不一样属性一同变化: 
代码以下:

// 在一个 jquery动画中同时应用三种类型的效果 
$("#go").click(function(){ 
$("#block").animate({ 
width: "90%", 
height: "100%", 
fontSize: "10em", 
borderWidth: 10 
}, 1000 ); 
}); 
animate( params, options ) 

用于建立自定义动画的函数。 
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每一个属性都表示一个能够变化的样式属性(如“height”、“top”或“opacity”)。注意:全部指定的属性必须用骆驼形式,好比用marginLeft代替margin-left. 
而每一个属性的值表示这个样式属性到多少时动画结束。若是是一个数值,样式属性就会从当前的值渐变到指定的值。若是使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。 
在 jQuery 1.2 中,你可使用 em 和 % 单位。另外,在 jQuery 1.2 中,你能够经过在属性值前面指定 "+=" 或 "-=" 来让元素作相对运动。 
第一个按钮按了以后展现了不在队列中的动画。在 div扩展到90%的同时也在增长字体,一旦字体改变完毕后,边框的动画才开始: 
代码以下:

$("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); 

stop( [clearQueue], [gotoEnd] ) 
中止全部在指定元素上正在运行的动画。 
若是队列中有等待执行的动画(而且clearQueue没有设为true),他们将被立刻执行 
clearQueue(Boolean):若是设置成true,则清空队列。能够当即结束动画。 
gotoEnd (Boolean):让当前正在执行的动画当即完成,而且重设show和hide的原始样式,调用回调函数等。 
点击Go以后开始动画,点Stop以后会在当前位置停下来: 
代码以下:
// 开始动画 $("#go").click(function(){ $(".block").animate({left: '+200px'}, 5000); }); // 当点击按钮后中止动画 $("#stop").click(function(){ $(".block").stop(); }); 
相关文章
相关标签/搜索