003_隐藏和显示效果
生活随笔
收集整理的這篇文章主要介紹了
003_隐藏和显示效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. hide()方法
1.1. 如果被選的元素已被顯示, 則隱藏該元素。
1.2. 語法:
$(selector).hide(speed,callback);1.3. 參數
1.4. 如果元素已經是完全不可見, 則該效果不產生任何變化, 除非規定了callback函數。
2. show()方法
2.1. 如果被選元素已被隱藏, 則顯示這些元素。
2.2. 語法:
$(selector).show(speed,callback);2.3. 參數
2.4. 如果元素已經是完全可見, 則該效果不產生任何變化, 除非規定callback函數。
2.5. 該效果適用于通過jQuery隱藏的元素, 或在CSS中聲明display:none的元素(但不適用于visibility:hidden的元素)。
3. toggle()方法
3.1. toggle()方法切換元素的可見狀態。如果被選元素可見, 則隱藏這些元素, 如果被選元素隱藏, 則顯示這些元素。
3.2. 語法:
$(selector).toggle(speed,callback,switch);3.3. 參數
4. 例子
4.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").hide('fast');});$('#btn2').click(function(){$("p").show('fast');});$('#btn3').click(function(){$("p").toggle('fast');});$('#btn4').click(function(){$("p").hide('slow');});$('#btn5').click(function(){$("p").show('slow');});$('#btn6').click(function(){$("p").toggle('slow');});$('#btn7').click(function(){$("p").hide('normal');});$('#btn8').click(function(){$("p").show('normal');});$('#btn9').click(function(){$("p").toggle('normal');});$('#btn10').click(function(){$("p").hide();});$('#btn11').click(function(){$("p").show();});$('#btn12').click(function(){$("p").toggle();});$('#btn13').click(function(){$("p").hide(3000);});$('#btn14').click(function(){$("p").show(3000);});$('#btn15').click(function(){$("p").toggle(3000);});$('#btn16').click(function(){$("p").toggle(true);});$('#btn17').click(function(){$("p").toggle(false);});});</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">默認隱藏段落</button> <button id="btn11">默認顯示段落</button> <button id="btn12">默認隱藏/顯示段落</button><br /><br /><button id="btn13">3s隱藏段落</button> <button id="btn14">3s顯示段落</button> <button id="btn15">3s隱藏/顯示段落</button><br /><br /><button id="btn16">toggle(true)</button> <button id="btn17">toggle(false)</button><p style="width: 300px; height: 300px; background: red;">jQuery隱藏和顯示效果</p></body> </html>4.2. 效果圖
總結
以上是生活随笔為你收集整理的003_隐藏和显示效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 002_jQuery语法
- 下一篇： 004_淡入淡出效果