一,JQuery实现隐藏显示的功能:
1,jQuery hide() 和 show()
通过 jQuery,您可以使用hide() 和 show() 方法来隐藏和显示 HTML 元素:
2,jQuery toggle()
通过 jQuery,您可以使用toggle() 方法来切换 hide() 和 show() 方法。
3,语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可选的speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的callback 参数是隐藏或显示完成后所执行的函数名称。
例子:
- <!DOCTYPE html>
- <html>
- <head>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").toggle(1000);
- });
- });
- </script>
- </head>
- <body>
- <button type="button">切换</button>
- <p>这是一个段落。</p>
- <p>这是另一个段落。</p>
- </body>
- </html>
-
二,淡入淡出动画效果功能:
方法名 | 含义 | 语法 |
fadeIn()
| 用于淡入已隐藏的元素 | $(selector).fadeIn(speed,callback);
|
fadeout() | 用于淡出可见元素 | $(selector).fadeOut(speed,callback); |
fadeToggle() | 可以在 fadeIn() 与 fadeOut() 方法之间进行切换 ,和上边的toggle功能一样
| $(selector).fadeToggle(speed,callback); |
fadeTo() | 允许渐变为给定的不透明度(值介于 0 与 1 之间)。 | $(selector).fadeTo(speed,opacity,callback); |
- <!DOCTYPE html>
- <html>
- <head>
- <script src="/jquery/jquery.js"></script>
- <script>
- $(document).ready(function(){
- $("button").click(function(){
- $("#div1").fadeTo("slow",0.15);
- $("#div2").fadeTo("slow",0.4);
- $("#div3").fadeTo("slow",0.7);
- });
- });
- </script>
- </head>
- <body>
- <p>演示带有不同参数的 fadeTo() 方法。</p>
- <button>点击这里,使三个矩形淡出</button>
- <br><br>
- <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
- <br>
- <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
- <br>
- <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
- </body>
- </html>
三,滑动效果的功能
方法名 | 含义 | 语法 |
slideDown
| 用于向下滑动元素 | $(selector).slideDown(speed,callback); |
slideUp | 用于向上滑动元素 | 同上 |
slideToggle | 如果元素向下滑动,则 slideToggle() 可向上滑动它们。 如果元素向上滑动,则 slideToggle() 可向下滑动它们。 | 同上 |