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>