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以后会在当前位置停下来:
用于建立自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每一个属性都表示一个能够变化的样式属性(如“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(); });