004_淡入淡出效果
1. jQuery淡入淡出方法
1.1. 通過jQuery, 您可以實現元素的淡入淡出效果。
1.2. jQuery擁有下面四種fade方法: fadeIn()、fadeOut()、fadeToggle()和fadeTo()。
2. fadeIn()方法
2.1. fadeIn()方法使用淡入效果來顯示被選元素, 假如該元素是隱藏的。
2.2. 語法:
$(selector).fadeIn(speed,callback);2.3. 參數
2.4. 如果元素已經顯示, 則該效果不產生任何變化, 除非規定callback函數。
2.5. 該效果適用于通過jQuery隱藏的元素, 或在CSS中聲明display:none的元素(但不適用于visibility:hidden的元素)。
3. fadeOut()方法
3.1. fadeOut()方法使用淡出效果來隱藏被選元素, 假如該元素是隱藏的。
3.2. 語法:
$(selector).fadeOut(speed,callback);3.3. 參數
3.4. 如果元素已經隱藏, 則該效果不產生任何變化, 除非規定了callback函數。
4. fadeToggle()方法
4.1. fadeToggle()方法可以在fadeIn()與fadeOut()方法之間進行切換。如果元素已淡出, 則fadeToggle()會向元素添加淡入效果。如果元素已淡入, 則fadeToggle()會向元素添加淡出效果。
4.2. 語法:
$(selector).fadeToggle(speed,easing,callback);4.3. 參數
5. fadeTo()方法
5.1. fadeTo()方法允許漸變為給定的不透明度(值介于0與1之間)。
5.2. 語法:
$(selector).fadeTo(speed,opacity,callback);5.3. 參數
6. 例子
6.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>jQuery淡入淡出效果</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("p").fadeOut('fast'); });$('#btn2').click(function(){$("p").fadeIn('fast'); });$('#btn3').click(function(){$("p").fadeToggle('fast'); });$('#btn4').click(function(){$("p").fadeOut('slow'); });$('#btn5').click(function(){$("p").fadeIn('slow'); });$('#btn6').click(function(){$("p").fadeToggle('slow', "swing"); });$('#btn7').click(function(){$("p").fadeOut('normal'); });$('#btn8').click(function(){$("p").fadeIn('normal'); });$('#btn9').click(function(){$("p").fadeToggle('normal', "linear"); });$('#btn10').click(function(){$("p").fadeOut(2000); });$('#btn11').click(function(){$("p").fadeIn(2000); });$('#btn12').click(function(){$("p").fadeToggle(2000, "linear"); });$('#btn13').click(function(){$("p").fadeTo('fast', 0.5); });$('#btn14').click(function(){$("p").fadeTo('slow', 0.3); });$('#btn15').click(function(){$("p").fadeTo('normal', 0.1); });$('#btn16').click(function(){$("p").fadeTo(2000, 1); });});</script></head><body><button id="btn1">fast淡出段落</button> <button id="btn2">fast淡入段落</button> <button id="btn3">fast淡出/淡入段落</button><br /><br /><button id="btn4">slow淡出段落</button> <button id="btn5">slow淡入段落</button> <button id="btn6">slow淡出/淡入段落</button><br /><br /><button id="btn7">normal淡出段落</button> <button id="btn8">normal淡入段落</button> <button id="btn9">normal淡出/淡入段落</button><br /><br /><button id="btn10">2s淡出段落</button> <button id="btn11">2s淡入段落</button> <button id="btn12">2s淡出/淡入段落</button><br /><br /><button id="btn13">fast漸變為給定的不透明度</button> <button id="btn14">slow漸變為給定的不透明度</button> <button id="btn15">normal漸變為給定的不透明度</button> <button id="btn16">2s漸變為給定的不透明度</button><p style="width: 300px; height: 300px; background: red;">jQuery淡出淡入和漸變為給定的不透明度</p></body> </html>6.2. 效果圖
總結
以上是生活随笔為你收集整理的004_淡入淡出效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 003_隐藏和显示效果
- 下一篇： 005_滑动效果