.toggle()
.toggle( [ duration ], [ callback ] ) 返回： jQuery
描述： 顯示或隱藏匹配元素。
-
version added: 1.0.toggle( [ duration ], [ callback ] )
duration一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久。
callback在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)。
-
version added: 1.4.3.toggle( [ duration ], [ easing ], [ callback ] )
duration一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久。
easing一個(gè)用來(lái)表示使用哪個(gè)緩沖函數(shù)來(lái)過(guò)渡的字符串。
callback在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)。
-
version added: 1.3.toggle( showOrHide )
showOrHide一個(gè)布爾值指示是否顯示或隱藏的元素。
如果沒(méi)有參數(shù)，.toggle()方法是最簡(jiǎn)單的方法來(lái)切換一個(gè)元素可見(jiàn)性：
$('.target').toggle();
通過(guò)改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒(méi)有動(dòng)畫(huà)。如果元素是最初顯示，它會(huì)被隱藏，如果隱藏的，它會(huì)顯示出來(lái)。display屬性將被儲(chǔ)存并且需要的時(shí)候可以恢復(fù)。如果一個(gè)元素的display值為inline，然后是隱藏和顯示，這個(gè)元素將再次顯示inline。
當(dāng)提供一個(gè)持續(xù)時(shí)間參數(shù)， .toggle()成為一個(gè)動(dòng)畫(huà)方法。.toggle()方法將為匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫(huà)。當(dāng)一個(gè)隱藏動(dòng)畫(huà)后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁(yè)面布局。
持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫(huà)越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。
如果提供回調(diào)函數(shù)參數(shù)，回調(diào)函數(shù)會(huì)在動(dòng)畫(huà)完成的時(shí)候調(diào)用。這個(gè)對(duì)于將不同的動(dòng)畫(huà)串聯(lián)在一起按順序排列是非常有用的。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是this是存在動(dòng)畫(huà)的DOM元素，如果多個(gè)元素一起做動(dòng)畫(huà)效果，值得注意的是每執(zhí)行一次回調(diào)匹配的元素，而不是作為一個(gè)整體的動(dòng)畫(huà)一次。
我們可以給任何元素做動(dòng)畫(huà)，比如一個(gè)簡(jiǎn)單的圖片：
<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.
});
});
隨著最初顯示的元素，我們可以在第一次點(diǎn)擊的時(shí)候?qū)⑵渚徛[藏：
第二次單擊將再次顯示元素：
該方法的第二個(gè)版本接受一個(gè)布爾參數(shù)。如果這個(gè)參數(shù)為true ，那么匹配的元素將顯示;如果false ，元素是隱藏的。從本質(zhì)上講，語(yǔ)句：
$('#foo').toggle(showOrHide);
is equivalent to:
if (showOrHide) {
$('#foo').show();
} else {
$('#foo').hide();
}
Examples:
Example: Toggles all paragraphs.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>Demo:
Example: Animates all paragraphs to be shown if they are hidden and hidden if they are visible, completing the animation within 600 milliseconds.
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});
</script>
</body>
</html>Demo:
Example: Shows all paragraphs, then hides them all, back and forth.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});
</script>
</body>
</html>