如果沒有參數(shù)，.toggle()方法是最簡單的方法來切換一個元素可見性：

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

通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。如果元素是最初顯示，它會被隱藏，如果隱藏的，它會顯示出來。display屬性將被儲存并且需要的時候可以恢復(fù)。如果一個元素的display值為inline，然后是隱藏和顯示，這個元素將再次顯示inline。

當(dāng)提供一個持續(xù)時間參數(shù)， .toggle()成為一個動畫方法。.toggle()方法將為匹配元素的寬度，高度，以及不透明度，同時進(jìn)行動畫。當(dāng)一個隱藏動畫后，高度值達(dá)到0的時候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局。

持續(xù)時間是以毫秒為單位的，數(shù)值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。

如果提供回調(diào)函數(shù)參數(shù)，回調(diào)函數(shù)會在動畫完成的時候調(diào)用。這個對于將不同的動畫串聯(lián)在一起按順序排列是非常有用的。這個回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是this是存在動畫的DOM元素，如果多個元素一起做動畫效果，值得注意的是每執(zhí)行一次回調(diào)匹配的元素，而不是作為一個整體的動畫一次。

我們可以給任何元素做動畫，比如一個簡單的圖片：

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

We will cause .toggle() to be called when another element is clicked:

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

隨著最初顯示的元素，我們可以在第一次點擊的時候?qū)⑵渚徛[藏：

第二次單擊將再次顯示元素：

該方法的第二個版本接受一個布爾參數(shù)。如果這個參數(shù)為true ，那么匹配的元素將顯示;如果false ，元素是隱藏的。從本質(zhì)上講，語句：

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

is equivalent to:

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