JQuery中的四个Fading方法可以设置元素的淡入淡出，分别如下：
fadeIn()用于淡入已经隐藏的元素语法为：
fadeIn(speed,callback);
其中 speed 与callback都是可选的参数，前者规定效果的时长，它可以取以下值：slow、fast 或具体毫秒数，后者是当前动画全部完成后所执行的函数。
同理fadeOut()用于淡出可见元素；
fadeToggle()用于切换淡入淡出的元素；
而fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间），语法：
fadeTo(speed,opacity,callback);
其中只有callback才是可选参数，opacity参数是设置为淡入淡出所给定的不透明度（值介于 0 与 1 之间）。
如下例：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#div1").fadeIn("fast").fadeTo("fast",0.1);<!-- 这是jQuery提供的Chaining ，它允许我们在一条语句中对同一个元素执行多个 jQuery 方法，即可以把多个动画效果串连起来。-->
$("#div2").fadeIn("slow");
$("#div3").fadeIn(1000);
$("#div4").fadeIn();
});
});
$(document).ready(function(){
$("#button2").click(function(){
$("#div1").fadeOut("fast");
$("#div2").fadeOut("slow");
$("#div3").fadeOut(1000);
$("#div4").fadeOut();
});
});
$(document).ready(function(){
$("#button3").click(function(){
$("#div1").fadeToggle("fast");
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(1000);
$("#div4").fadeToggle();
});
});
$(document).ready(function(){
$("#button4").click(function(){
$("#div1").fadeTo("fast",0.3);
$("#div2").fadeTo("slow",0.7);
$("#div3").fadeTo(1000,1,alert("设置透明度成功！"));
});
});
</script>
</head>
<body>
<button id="button1">淡入四个矩形</button>
<button id="button2">淡出四个矩形</button>
<button id="button3">切换淡入淡出</button>
<button id="button4">设置其透明度</button>
<div id="div1" style="width:80px;height:80px; display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px; display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px; display:none;background-color:blue;"></div>
<br>
<div id="div4" style="width:80px;height:80px; display:none;background-color:black;"></div>
</body>
</html>
JQurey还给我们提供了设置元素隐藏于显示的方法：显示show(speed,callback)、隐藏hide(speed,callback)、切换toggle(speed,callback)，用法与fade一样。
1219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
