设置效果
属性列表
属性 | 描述 |
---|---|
jQuery.fx.off | 用于设置或返回是否全局性地禁用所有动画。 |
用于设置或返回动画的帧速(毫秒值)。 |
属性说明
jQuery.fx.off:
如果不对该属性设置值,则返回表示是否全局性地禁用了动画效果的布尔值。
如果将该属性设为true,将全局性地禁用所有动画。所有正在执行的动画队列不会受到影响。尚未执行的任何动画队列都会在执行时立即完成,而不再带有动画效果。
如果将该属性设为false,将全局性地启用动画效果。
你可以在遇到以下情况时,需要禁用动画效果。
- 你在配置比较低的电脑上使用jQuery。
- 某些用户可能由于动画效果而遇到了可访问性问题。
语法:
- .jQuery.fx.off
说明:
jQuery 1.3 新增该 静态属性
jQuery.fx.off属性的返回值是Boolean类型,返回表示是否全局性地禁用了动画效果的布尔值。如果已禁用就返回true,否则返回false。
默认情况下,该属性的返回值为false。
HTML:
<p>
<input id="exec" type="button" value="执行动画" />
<input id="switch" type="button" value="禁用动画效果" />
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;" >CodePlayer</div>
javaScript代码:
$("#exec").click( function(){
var $myDiv = $("#myDiv");
// 在现有高度的基础上增加300px (如果原来是100px,增加后就是400px)
$myDiv.animate( { height: "+=300px" }, 2000 );
$myDiv.animate( { width: "50%" }, 1000 );
$myDiv.animate( { width: "200px", height: "100px" }, 1000 );
} );
$("#switch").click( function(){
// 使用jQuery.fx.off或$.fx.off均可(如果变量$是jQuery在使用的话)
if( $.fx.off ){
jQuery.fx.off = false; // 启用动画效果
this.value = "禁用动画效果";
}else{
$.fx.off = true; // 禁用动画效果
this.value = "启用动画效果";
}
} );
jQuery.fx.interval:
用于设置jQuery动画每隔多少毫秒绘制一帧图像(触发一次样式更改,浏览器可能会重新绘制当前页面)。
该值越小,则动画的触发次数越多,动画效果也更明显、更平滑,当然也就越耗费性能。
更改该属性值时,正在执行的动画队列将不受影响。尚未执行的任何动画队列都将按照更改后的帧速来绘制动画效果。
语法:
- .jQuery.fx.interval
说明:
jQuery 1.4.3 新增该 静态属性。
jQuery.fx.interval属性的返回值是Number类型,返回动画的帧速(毫秒值)。
该属性的默认值为 13。
HTML:
<p>
帧速(每隔多少毫秒绘制一帧):
<select id="frameRate">
<option value="5">5</option>
<option value="10">10</option>
<option value="13" selected="selected">默认(13)</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="300">300</option>
<option value="1000">1000</option>
</select>
<input id="exec" type="button" value="执行动画" />
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #ccc;" >CodePlayer</div>
javaScript代码:
// 更改帧速
$("#frameRate").change( function(){
$.fx.interval = this.value; // 设置帧速
} );
// 执行动画
$("#exec").click( function(){
var $myDiv = $("#myDiv");
// 在现有高度的基础上增加300px (如果原来是100px,增加后就是400px)
$myDiv.animate( { height: "+=300px" }, 2000 );
$myDiv.animate( { width: "50%" }, 1000 );
$myDiv.animate( { width: "200px", height: "100px" }, 1000 );
} );