jQuery特效-fade

备注：方法的参数类型，见 jQuery特效-方法参数类型

.fadeIn()

显示匹配的元素使之渐变成不透明

.fadeIn( [duration ] [, complete ] )

.fadeIn( options )

.fadeIn( [duration ] [, easing ] [, complete ] )

.fadeIn()方法变化匹配元素的透明度。

<script>$(document.body).click(function () {$("div:hidden:first").fadeIn("slow");//慢慢显现});</script>

<script>$("a").click(function () {$("div").fadeIn(3000, function () {//3秒后执行该函数$("span").fadeIn(100);//100毫秒显现});return false;});</script>

.fadeOut()

隐藏匹配的元素，通过渐变他们成透明

.fadeOut( [duration ] [, complete ] )

.fadeOut( options )

.fadeOut( [duration ] [, easing ] [, complete ] )

.fadeOut()方法变化匹配元素的透明度。一旦透明度到达0时，display的样式会被设置为none.因此元素不会再影响页面的布局。

Note：为了不必要的DOM操作，.fadeOut()不会再隐藏已经被认为是hidden的元素。可以查看jQuery的:hidden Selector对hidden的定义.

<script>$("p").click(function () {$("p").fadeOut("slow");//慢慢淡出});</script>

<script>$("span").click(function () {$(this).fadeOut(1000, function () {//1秒后执行该函数$("div").text("'" + $(this).text() + "' has faded!");//提示信息$(this).remove();//移除该元素});});$("span").hover(function () {$(this).addClass("hilite");}, function () {$(this).removeClass("hilite");});</script>

.fadeTo()

调整匹配元素的透明度

.fadeTo( duration, opacity [, complete ] )

.fadeTo( duration, opacity [, easing ] [, complete ] )

.fadeTo()方法变化匹配元素的透明度。

<script>$("p:first").click(function () {$(this).fadeTo("slow", 0.33);//opacity 设置为0.33});</script>

<script>$("div").click(function () {$(this).fadeTo("fast", Math.random());//设置随机的透明度});</script>

<script>var getPos = function (n) {return (Math.floor(n) * 90) + "px";};$("p").each(function (n) {var r = Math.floor(Math.random() * 3);var tmp = $(this).text();$(this).text($("p:eq(" + r + ")").text());$("p:eq(" + r + ")").text(tmp);$(this).css("left", getPos(n));});$("div").each(function (n) {$(this).css("left", getPos(n));}).css("cursor", "pointer").click(function () {$(this).fadeTo(250, 0.25, function () {//250毫秒后执行该函数$(this).css("cursor", "").prev().css({"font-weight": "bolder","font-style": "italic"});});});</script>

.fadeToggle()

通过改变他们的透明度显示或隐藏匹配的元素

.fadeToggle( [duration ] [, easing ] [, complete ] )

.fadeToggle( options )

.fadeToggle()方法变化匹配元素的透明度。当在一个可见的元素上调用时，一旦透明度到达0时，display的样式会被设置为none.因此元素不会再影响页面的布局。

<script>$("button:first").click(function() {$("p:first").fadeToggle("slow", "linear");});$("button:last").click(function () {$("p:last").fadeToggle("fast", function () {$("#log").append("<div>finished</div>");});});</script>