jQuery实现页面淡入淡出操作

HTML

<h3 class="h3-text">页面淡入淡出 --- fadeIn()函数与fadeOut()函数</h3>
<button id="id-button-fadeout">页面淡出效果</button>
<button id="id-button-fadein">页面淡入效果</button>
<div id="id-div-fade">
    <p>这里js控制的两个数值:</p>
    <p>1.第1个为淡入时间;</p>
    <p>2.第2个为淡出时间;</p>
</div>
					    

JS

$(document).ready(function(){
	$("#id-button-fadeout").click(function(){
		$("#id-div-fade").fadeOut(3000);
		$("#div-log").html($("#div-log").html()+"<p>"+"fadeOut()函数 ：使用淡出效果来隐藏被选元素"+"</p>");
	});
	$("#id-button-fadein").click(function(){
		$("#id-div-fade").fadeIn("fast");
		$("#div-log").html($("#div-log").html()+"<p>"+"fadeIn()函数 ：使用淡入效果来显示被选元素"+"</p>");
	});
	/*
	$("#id-div-fade").fadeToggle(3000);
	$("#id-div-fade").fadeToggle(3000);
	$("#id-div-fade").fadeTo(5000,0.6);
	$("#id-div-fade").fadeIn(fast);
	*/
});