注意： jQuery 同样提供的一个动画方法，也叫 .toggle()。动画的 .toggle() 应用于元素的可见性。究竟哪一个方法会被执行，取决于传递的参数设置。

.toggle() 方法绑定方法用于 click 事件，因此，对于 click 事件适用的规则，同样也适用于该事件。

举例来说，请看下面的HTML：
<div id="target">
  Click here
</div>

可以将事件绑定在 <div> 上：

$('#target').toggle(function() {
  alert('First handler for .toggle() called.');
}, function() {
  alert('Second handler for .toggle() called.');
});

当反复在元素上点击时，会轮流显示以下信息：

First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.

如果提供的函数多于两个，.toggle() 也将会循环这些事件。例如，如果提供了三个函数，那么第一个事件会在第一次，第四次，第七次这样的点击次数时被调用

之所以要有 .toggle() 方法，主要是出于使用方便的角度。它采用相对简单的实现，完成了需要人工实现的同样行为。如果内置的 .toggle() 的假设被证明是受限的，那么这可能是必要的。（原文如下：It is relatively straightforward to implement the same behavior by hand, and this can be necessary if the assumptions built into .toggle() prove limiting.）例如，如果在相同的元素上绑定了两个 .toggle() 事件，那么无法保证它们能正确的工作。因为 .toggle() 内部使用了 click 进行处理，所以我们必须先解除 click 事件的绑定，移除 .toggle() 的附属行为。这样的话，其它的 click 处理，就会出现麻烦。在 .toggle() 的实现中，同样调用了 .preventDefault()，因此，链接将不会被触发。并且，如果已经调用了元素上的 .toggle() 事件，那么，按钮的点击事件也不会被触发。

注意: 在事件处理模块中，也有一个叫 .toggle() 的方法。但哪一个会被执行，取决于传递的参数设置。

可以非常方便的使用没有任何参数的 .toggle() 方法来切换元素的显示或隐藏状态：

$('.target').toggle();

该方法会改变匹配元素 CSS 的 display 属性，使匹配的元素立刻显示或隐藏，而且没有动画效果。如果元素一开始是显示的，调用该方法后，它会被隐藏。如果元素一开始是隐藏的，调用该方法后，它会被重新显示出来。根据不同的状态，display 属性的值会被保存和还原。如果元素的 display 的值是 inline，那么当它先隐藏再显示时，display 的值依然是 inline。

如果提供了 duration 参数， .toggle() 就变成一个动画方法了。.toggle() 会同时对元素的高、宽以及透明度进行动画操作。 当它们的属性值变为0时，display 样式的属性会被设置成 none ，以此来保证运行动画的那个元素不再影响页面的布局。

duration 参数可以提供一个毫秒数，代表动画运行的时间，时间越长动画越慢。还可以提供字符串 'fast' 和 'slow' ，分别对应了 200 和 600 毫秒。如果没有设置 duration 参数，或者设置成其他无法识别的字符串，就会使用默认值 400 毫秒。

从 jQuery 1.4.3 起，增加了一个可选的参数，用于确定使用的缓冲函数。缓冲函数确定了动画在不同位置的速度。jQuery默认只提供两个缓冲效果：swing（默认值） 和 线性缓冲效果linear。更多特效需要使用插件。可以访问 jQuery UI 网站 来获得更多信息。

如果提供了回调函数，那么当动画结束时，会调用这个函数。通常用来按顺序执行一组不同的动画。这个函数不接受任何参数，但是 this 会设成将要执行动画的那个元素。如果对多个元素设置动画，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组动画整体才执行一次。

我们可以对任何元素应用动画，比如下面这个例子，对图片应用动画：

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

当点击 div 时，将会在 id 为 "book" 的元素上，调用 .toggle() 方法。例如：

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
  });
});

图片一开始是显示的，第一次点击 div 之后，图片会被慢慢隐藏起来（以下是执行过程中的效果图）：

第二次点击 div 时，图片会被慢慢显示出来（以下是执行过程中的效果图）：

toggle(showOrHide) 方法接收一个布尔值。如果该值为 true，则匹配的元素会被显示，如果该值为 false，则元素会被隐藏。从本质上讲，以下语句:

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

等价于：

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

• 所有的 jQuery 动画, 包括 .toggle(), 都可以被关闭，通过全局设置 jQuery.fx.off = true, 效果等同于将动画时间 duration 设置成 0. 可以访问 jQuery.fx.off 来获得更多信息。