jQuery中用于控制元素显示和隐藏效果的方法如表1所示。

　　表1 控制元素的显示和隐藏

　　在表1中，参数speed表示动画的速度，可设置为动画时长的毫秒值(如1000)，或预定的3种速度(slow、fast和normal);参数easing表示切换效果，默认效果为swing，还可以使用linear效果;参数fn表示在动画完成时执行的函数。

　　下面通过代码演示show()、hide()和toggle()的简单使用。

　　<style>
　　div { width: 150px; height: 300px; background-color: pink; }
　　</style>
　　<button>显示</button>
　　<button>隐藏</button>
　　<button>切换</button>
　　<div></div>
　　<script>
　　$("button").eq(0).click(function() {
　　$("div").show(1000, function() {
　　alert("已显示");
　　});
　　});
　　$("button").eq(1).click(function() {
　　$("div").hide(1000, function() {
　　alert("已隐藏");
　　});
　　});
　　$("button").eq(2).click(function() {
　　$("div").toggle(1000);
　　});
　　</script>

　　上述代码中，第2行设置div元素的样式宽度150px，高度300px，背景色pink。第4~6行分别定义功能按钮，第7行定义div元素，第9~13行给页面中的第1个按钮绑定单击事件，实现单击“显示”按钮控制div元素的显示，第14~18行给页面中的第2个按钮绑定单击事件，实现单击“隐藏”按钮控制div元素的隐藏，第19~21行给页面中的第3个按钮绑定单击事件，实现单击“切换”按钮控制div元素的显示和隐藏。

　　在浏览器中运行，效果如图1所示。

　　如果您对java技术非常感兴趣，可以来了解一下千锋教育提供的课程，千锋教育在全国20多所城市均设有教学基地，欢迎同学们前来咨询了解。加入千锋教育的官方交流群-791201477，群内会有专门的老师为您详细解答千锋教育IT课程的详情，找到适合您学习的科目。