jQuery效果函数

基本

show()

用于显示所有匹配的元素。此外,你还可以指定元素显示的过渡动画效果。 如果元素本身是可见的,则不对其作任何改变。如果元素是隐藏的,则使其可见。 常用语法:jQueryObject.show( [ duration ] [, easing ] [, complete ] )

参数描述
duration可选/String/Number类型指定过渡动画运行多长时间(毫秒数),默认值为400。该参数也可以为字符串”fast”(=200)或”slow”(=600)。
easing可选/String类型指定使用何种动画效果,默认为”swing”,还可以设为”linear”或其他自定义的动画样式的函数名称。
complete可选/Function类型元素显示完毕后需要执行的函数。函数内的 this指向当前DOM元素。
比如显示p元素,过渡动画为600ms:

1
2
$("p").show(600); 
// 或者 $("p").show("slow"); $("p").show( { duration: 1000 } );

显示p元素,过度动画为200ms,动画效果为linear:

1
$("p").show(600,"linear");

显示p元素,并添加回调函数:

1
$("p").show(function(){ alert('显示完毕') });

hide()

用于隐藏所有匹配的元素。作用和show()相反,语法一样,这里不再赘述。 例如隐藏p元素,动画速度为fast,并添加回调:

1
$("p").hide("fast",function(){ alert('隐藏完毕') });

滑动

slideDown()

用于显示所有匹配的元素,并带有向下滑动的过渡动画效果。 向下滑动的动画效果,即元素可见区域的高度从0逐渐增大到其原有高度(向下逐渐展开)。 如果元素本身是可见的,则不对其作任何改变。如果元素是隐藏的,则使其可见。 语法和show()一致,不再赘述。

slideUp()

效果和slideUp()相反,语法一致,不再赘述。

slideToggle()

用于切换所有匹配的元素,并带有滑动的过渡动画效果。 所谓”切换”,也就是如果元素当前是可见的,则将其隐藏(向上滑动);如果元素当前是隐藏的,则使其显示(向下滑动)。 语法和show()一致,不再赘述。 例如,向上或向下滑动下拉框div元素,并添加回调:

1
2
3
4
5
6
7
8
$("div").slideToggle(function(){
var $this = $(this);
if($this.is(":visible")){
alert("向下滑动展开");
}else{
alert("向上滑动隐藏");
}
});

淡入淡出

fadeIn()

用于显示所有匹配的元素,并带有淡入的过渡动画效果。 淡入的动画效果,即元素的不透明度的比例从0%逐渐增加到100%。 如果元素本身是可见的,则不对其作任何改变。如果元素是隐藏的,则使其可见。 语法和show()一致,不再赘述。

fadeOut()

用于隐藏所有匹配的元素,并带有淡出的过渡动画效果。效果和fadeIn()相反,语法和show()一致,不再赘述。

fadeTo()

以渐进的方式把元素从当前透明的过渡到指定的透明度。可以指定过渡时长,目标透明度,回调函数等。 常用语法:fadeTo(duration,opacity [,complete])。 例如,将p元素的透明的调整为.5,时长200ms,并添加回调:

1
2
3
$( "p" ).fadeTo( "slow" , 0.5, function() {
// Animation complete.
});

fadeToggle()

用于切换所有匹配的元素,并带有淡入/淡出的过渡动画效果。 所谓”切换”,即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。语法和show()一致,不再赘述。

自定义

animate()

用于执行一个基于css属性的自定义动画。 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画。 常用语法:jQueryObject.animate( cssProperties [, duration ] [, easing ] [, complete ] )

参数描述
cssPropertiesObject类型一个或多个css属性的键值对所构成的Object对象。
duration可选/String/Number类型指定动画运行多长时间(毫秒数),默认值为400。该参数也可以为字符串”fast”(=200)或”slow”(=600)。
easing可选/String类型指定使用何种动画效果,默认为”swing”,还可以设为 “linear”或其他自定义的动画样式函数。
complete可选/Function类型元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。

大多数非数值的css属性都无法用来执行动画。例如:width、height、left、top都可用于动画,但color、background-color无法用于动画(除非使用jQuery.Color()插件)。除非你为属性值指定了单位(例如:px、em、%),否则默认的数值单位为像素(px)。

速写的css属性可能无法获得完整全面的支持,例如:border、margin等,因此不推荐使用。

你还可以将css属性值设为一些特定的字符串,例如:”show”、”hide”、”toggle”,则jQuery会调用该属性默认的动画形式。

此外,css属性值也可以是相对的,你可以为属性值加上前缀”+=”或”-=”,以便于在原来的属性值上增加或减少指定的数值。例如:{ "height": "+=100px" },表示在原有高度的基础上增加100px。

例如,给div高度调整为300px,宽度调整为400px,动画时长为slow:

1
$("div").animate( { width: "400px", height: "300px" }, "slow" );

根据div高度切换显示/隐藏,显示时高度从0增加到原高度,隐藏时高度从原高度减小到0:

1
$("div").animate( { height: "toggle" });

stop()

用于停止当前匹配元素上正在运行的动画。比如div绑定了三个animate动画函数:

1
2
3
var $myDiv = $("div");
$myDiv.animate( { height: "+=300px" }, 2000 ); // 动画1
$myDiv.animate( { width: "50%" }, 1000 ); // 动画2

假设当前div元素正在执行第一个动画,此时执行以下stop()函数时,效果为:

1
2
3
4
$myDiv.stop( ); // 马上停止动画1,继续按顺序执行动画2和动画3
$myDiv.stop( true ); // 马上停止动画1,并且不再执行动画2和动画3
$myDiv.stop( "fx", true ); // 效果和$myDiv.stop( true );一样
$myDiv.stop( true, true ); // 立刻马上执行完动画1,并不再执行动画2和动画3

delay()

用于延迟队列中下一项的执行。delay()可以将队列中等待执行的下一个动画延迟指定的时间后才执行。它常用在队列中的两个jQuery效果函数之间,从而在上一个动画效果执行后延迟下一个动画效果的执行时间。 如果下一项不是效果动画(比如show()就不是效果动画),则它不会被加入效果队列中,因此该函数不会对它进行延迟调用。 比如:

1
2
3
var $myDiv = $("div");
$myDiv.slideUp( 1000 ).delay( 5000 ).slideDown( 1500 );
//先执行slideUp(),然后等待5s,在执行slideDown()

finish()

停止当前正在运行的动画,删除所有队列中的动画,直接显示最终动画执行完毕的效果。比如div绑定了三个animate动画函数:

1
2
3
4
var $myDiv = $("div");
$myDiv.animate( { height: "+=300px" }, 2000 ); // 动画1
$myDiv.animate( { width: "50%" }, 1000 ); // 动画2
$myDiv.animate( { width: "200px", height: "100px" }, 1000 ); // 动画3

假设当前div元素正在执行第一个动画,此时执行finish()函数时,立刻停止当前动画,并且div直接变为最终状态(width: "200px", height: "100px")。

设置

jQuery.fx.interval

用于设置jQuery动画每隔多少毫秒绘制一帧图像,该值越小,则动画的触发次数越多,动画效果也更明显、更平滑,当然也就越耗费性能,默认值为13。设置帧数为5:

1
$.fx.interval = 5;

jQuery.fx.off

关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。 有些情况下可能需要这样,比如你在配置比较低的电脑上使用jQuery。当把这个属性设成false之后,可以重新开启所有动画。 禁用动画效果:

1
$.fx.off = true; // 禁用动画效果

参考网站:
http://www.365mini.com/
http://caibaojian.com/jquery/

请作者喝瓶肥宅水🥤

0