<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$("#but2").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#but3").click(function(){
$("p").hide(100);
});
$("#but4").click(function(){
$("p").show(200);
});
$("#but5").click(function(){
$("p").slideToggle("slow")
});
$("#but6").click(function(){
$("p").animate({left:'120px'},'5000')
});
$("#but7").click(function(){
$("#div1").stop(true)
$("#div2").stop(true)
$("#div3").stop(true)
});
});
</script>
</head>
<body>
<p style="background:#98bf21;position:absolute;">以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<br>
<br>
<button>点击淡出 div 元素。</button>
<div id="but2"><button>点击淡入 div 元素。</button></div>
<br>
<button id="but3">隐藏</button>
<button id="but4">显示</button>
<button id="but5">显示和隐藏</button>
<button id="but6">动画</button>
<button id="but7">停止</button>
<p >以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;position=absolute"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>