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>