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一样。