jQuery 效果 - 隐藏与显示
接下来，您将学习到 jQuery 的隐藏、显示、切换、滑动、淡入和设置动画等。
点击 显示/隐藏 面板
实例
演示一个简单的 jQuery hide() 方法。
另一个 hide() 方法，演示如何隐藏部分文本。
jQuery hide() 与 show()
使用 jQuery，可以使用 hide() 和 show() 方法隐藏和显示 HTML 元素:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script></head><body><p>如果点击 "Hide" 按钮, 这段文本将消失.</p><button id="hide">Hide</button><button id="show">Show</button></body></html>
语法:
$(selector).hide(speed,callback);$(selector).show(speed,callback);
可选 speed 参数指定 隐藏/显示 的速度，可以采用以下值："slow"、"fast" 或毫秒。
可选的 callback 回调参数是在 hide() 或 show() 方法完成后执行的函数（您将在后面的章节中了解有关回调函数的更多信息）。
下面的示例演示了带有 speed 参数的 hide() 方法:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").hide(1000);});});</script></head><body><button>隐藏</button><p>这是一段文本</p><p>这是另一段文本</p></body></html>
jQuery toggle()
还可以使用 toggle() 方法在隐藏和显示元素之间切换。
显示的元素执行隐藏，隐藏的元素则执行显示:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").toggle();});});</script></head><body><button>在隐藏和显示段落之间切换</button><p>这是一段文本</p><p>这是另一段文本</p></body></html>
语法:
$(selector).toggle(speed,callback);
可选参数 speed 可以采用以下值："slow", "fast"或毫秒。
可选参数 callback 是在 toggle() 完成后执行的函数。
jQuery 效果参考
有关所有 jQuery 效果的完整概述，请访问本站的 jQuery 效果参考 。