jQuery 淡入淡出

目录

　　jQuery fadeIn()

　　jQuery fadeOut()

　　jQuery fadeToggle()

　　jQuery fadeTo()

jQuery fadeIn() 

jQuery fadeIn() 用于淡入已隐藏的元素。

案例：

<button class="show">show</button>
<p class="k" style="display: none;">kkkkkkkkkkk</p>
<p class="q" style="display: none;">qqqqqqqqqqq</p>
<p class="c" style="display: none;">ccccccccccc</p>
<script>
	$(document).ready(function(){
		$(".show").click(function(){
			$(".q").fadeIn();
			$(".k").fadeIn("slow");
			$(".c").fadeIn(3000);
		});
	});
</script>

jQuery fadeOut()

jQuery fadeOut() 方法用于淡出可见元素。

案例：

<button class="show">show</button>
<p class="k">kkkkkkkkkkk</p>
<p class="q">qqqqqqqqqqq</p>
<p class="c">ccccccccccc</p>
<script>
	$(document).ready(function(){
		$(".show").click(function(){
			$(".q").fadeOut();
			$(".k").fadeOut("slow");
			$(".c").fadeOut(3000);
		});
	});
</script>

jQuery fadeToggle()

jQuery fadeToggle() 方法可以在fadeIn()与fadeOut()方法之间进行切换。

案例：

<button class="show">show</button>
<p class="k">kkkkkkkkkkk</p>
<p class="q">qqqqqqqqqqq</p>
<p class="c">ccccccccccc</p>
<script>
	$(document).ready(function(){
		$(".show").click(function(){
			$(".q").fadeToggle();
			$(".k").fadeToggle("slow");
			$(".c").fadeToggle(3000);
		});
	});
</script>

jQuery fadeTo()

jQuery fadeTo() 方法允许渐变为给定的不透明度（值0~1之间）。

案例：

<button class="show">show</button>
<p class="k">kkkkkkkkkkk</p>
<p class="q">qqqqqqqqqqq</p>
<p class="c">ccccccccccc</p>
<script>
	$(document).ready(function(){
		$(".show").click(function(){
			$(".q").fadeTo("slow", 0.1);
			$(".k").fadeTo("slow", 0.5);
			$(".c").fadeTo("slow",0.7);
		});
	});
</script>