<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#button2").click(function(){
$("#div1").fadeOut(3000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut(1000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的fadeIn()方法</p>
<button id="button1">点击这里,使三个矩形淡入</button>
<button id="button2">点击这里,使三个矩形淡出</button><br /><br /><br /><br />
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").fadeToggle("1000") //褪色开关
});
});
</script>
</head>
<body>
<p>演示点击图片图片淡入淡出</p>
<button>点我淡入淡出</button><br /><br />
<div style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("1000",0.1);
$("#div2").fadeTo("slow",0.5);
$("#div3").fadeTo("slow",0.5);
$("div").fadeTo("slow",1)//还原到1
});
});
</script>
</head>
<body>
<p>演示不同参数fadeTo()方法</p>
<button>点我淡入淡出</button><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>