<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
//三个矩形淡入
$("#but1").click(function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(2000);
$("#div3").fadeIn(3000);
});
//三个矩形淡出
$("#but2").click(function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut(3000);
});
//三个矩形淡入淡出
$("#but3").click(function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(2000);
$("#div3").fadeToggle(3000);
});
//三个矩形淡出 不透明度(值介于 0 与 1 之间)。
$("#but4").click(function(){
$("#div1").fadeTo("slow",0.3);
$("#div2").fadeTo("slow",0.6);
$("#div3").fadeTo("slow",0.9);
});
});
</script>
</head>
<body>
<button id="but1">三个矩形淡入</button><br>
<button id="but2">三个矩形淡出</button><br>
<button id="but3">三个矩形淡入淡出</button><br>
<button id="but4">三个矩形淡出</button><br>
<br><br>
<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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
//三个矩形淡入
$("#but1").click(function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(2000);
$("#div3").fadeIn(3000);
});
//三个矩形淡出
$("#but2").click(function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut(3000);
});
//三个矩形淡入淡出
$("#but3").click(function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(2000);
$("#div3").fadeToggle(3000);
});
//三个矩形淡出 不透明度(值介于 0 与 1 之间)。
$("#but4").click(function(){
$("#div1").fadeTo("slow",0.3);
$("#div2").fadeTo("slow",0.6);
$("#div3").fadeTo("slow",0.9);
});
});
</script>
</head>
<body>
<button id="but1">三个矩形淡入</button><br>
<button id="but2">三个矩形淡出</button><br>
<button id="but3">三个矩形淡入淡出</button><br>
<button id="but4">三个矩形淡出</button><br>
<br><br>
<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>
</body>
</html>