jQ效果(淡入淡出)


fading方法(淡入淡出):

1、fadein(), 用於淡入已隱藏的元素

語法:$(selector).fadeIn(speed,callback);

speed 參數規定效果的時長,它可以取:"slow"、"fast" 或毫秒;callback 參數是 fading 完成后所執行的函數名稱

html:
<button class="btn">點擊</button>
<div class="div1" style="width: 50px; height: 50px; background: yellow; display: none;"></div>
<div class="div2" style="width: 50px; height: 50px; background: blue; display: none;"></div>
<div class="div3" style="width: 50px; height: 50px; background: red; display: none;"></div>

  

jq:
<script>
	//點擊淡入div元素
	$(function(){
		$(".btn").click(function(){
			$("#div1").fadeIn();
			$("#div2").fadeIn("slow");
			$("#div3").fadeIn(3000);
		});
	});
</script>

  2、fadeout(),用於淡出可見元素

jq:
<script>
//點擊淡出div元素
	$(function(){
		$(".btn").click(function(){
			$("#div1").fadeOut();
			$("#div2").fadeOut("slow");
			$("#div3").fadeOut(3000);
		});
	});
</script>	

  3、fadeToggle(),可以在 fadeIn() 與 fadeOut() 方法之間進行切換

如果元素已淡出,則 fadeToggle() 會向元素添加淡入效果。

如果元素已淡入,則 fadeToggle() 會向元素添加淡出效果。

jq:
<script>
//點擊淡入淡出
	$(function(){
		$(".btn").click(function(){
			$("#div1").fadeToggle();
			$("#div2").fadeToggle("slow");
			$("#div3").fadeToggle(3000);
		});
	});
</script>

  4、fadeTo(),允許漸變為給定的不透明度(值介於 0 與 1 之間)

語法:$(selector).fadeTo(speed,opacity,callback);

其中,speed和opacity是必需參數

jq:
<script>
//漸變透明度
	$(function(){
		$(".btn").click(function(){
			$("#div1").fadeTo("slow",0.15);
			$("#div2").fadeTo("slow",0.3);
			$("#div3").fadeTo("slow",0.8);
		});
	});
</script>

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM