jQuery页面基本效果显示隐藏方法大全

范范

jQuery页面基本效果显示隐藏方法大全

在页面交互中，经常会碰到将页面元素进行 显示、隐藏 的处理方法，本次就主要讲解 jQuery的页面基本显示效果 的各个方法。

jQuery页面基本显示隐藏效果有如下几个方法

---

[C#] 纯文本查看 复制代码

1. show([s,[e],[fn]])  显示隐藏的匹配元素。
2. hide([s,[e],[fn]])  隐藏显示的元素。
3. toggle(,[e],[fn])  用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

在平常的应用中，show，hide是最常见的，基本上对元素单一的进行显示、隐藏，都会 用到。toggle，主要用在交互中，下面就对几种方法进行逐个讲解

1. show([speed,[easing],[fn]])

---

显示隐藏的匹配元素。

参数用法讲解如下：

[C#] 纯文本查看 复制代码

1. speed[,fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。

2. [speed],[easing],[fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

下面根据实例，对show进行具体的讲解
实例1
显示所有的段落
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").show()

实例2
用缓慢的动画将隐藏的段落 显示出来，历时600毫秒
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").show("slow")

实例3
将隐藏的段落用将近4秒的时间显示出来..... 并在之后执行一个反馈.....
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").show(4000,function(){
   $(this).text("Animation Done...");
 });

附件html代码：

[HTML] 纯文本查看 复制代码

<p style="display: none">Hello</p>

2. hide([s,[e],[fn]])  

---

隐藏显示的元素。
hide的参数用法与show是完全一样的，只是一个是显示，一个是隐藏

参数讲解如下：

[C#] 纯文本查看 复制代码

1. speed[,fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。

2. [speed],[easing],[fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

下面就用一个实例进行hide的用法
实例1
用200毫秒将段落迅速 隐藏，之后弹出一个对话框
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").hide("fast",function(){
   alert("Animation Done.");
 });

附件html代码：

[HTML] 纯文本查看 复制代码

<p style="display: none">Hello</p>

3. toggle(,[e],[fn])  

---

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

即： 如果元素是显示的，就将其隐藏；如果元素是隐藏的，就将其显示

实例1
用200毫秒将段落迅速切换显示状态，之后弹出一个对话框
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").toggle("fast",function(){
   alert("Animation Done.");
 })

备注：
下面就根据一个对等的jQuery方法，来体现toggle的用法。
如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的
jQuery：

[JavaScript] 纯文本查看 复制代码

$('#foo').toggle(showOrHide)

jQuery：

[JavaScript] 纯文本查看 复制代码

if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}

从上面的内容可以看出，toggle，明显的缩短了jQuery的代码行数，以实现交互的功能。

站长苏飞

我只是路过打酱油的。

范范

toggle现在使用在很多地方，在页面处理中也经常会碰见，稍后会体现出来部分