.slideToggle()
.slideToggle( [ duration ], [ callback ] ) 返回： jQuery
描述： 用滑動(dòng)動(dòng)畫(huà)顯示或隱藏一個(gè)匹配元素。
-
version added: 1.0.slideToggle( [ duration ], [ callback ] )
duration一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久。
callback在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)。
-
version added: 1.4.3.slideToggle( [ 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ù)。
.slideToggle()方法將給匹配元素的高度的動(dòng)畫(huà)，這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去或滑上來(lái)，看似透露或隱瞞的項(xiàng)目。display屬性將被儲(chǔ)存并且需要的時(shí)候可以恢復(fù)。如果一個(gè)元素的display值為inline，然后是隱藏和顯示，這個(gè)元素將再次顯示inline.。當(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 .slideToggle() to be called when another element is clicked:
$('#clickme').click(function() {
$('#book').slideToggle('slow', function() {
// Animation complete.
});
});
隨著最初顯示的元素，我們可以在第一次點(diǎn)擊的時(shí)候?qū)⑵渚徛[藏：
第二次單擊將再次顯示元素：
注意：
- 所有的jQuery效果，包括
.slideToggle(),能使用jQuery.fx.off = true關(guān)閉全局性。更多信息請(qǐng)查看jQuery.fx.off。
Examples:
Example: 所有段落動(dòng)畫(huà)向上或向下滑動(dòng)，600毫秒內(nèi)完成的動(dòng)畫(huà)。
<!DOCTYPE html>
<html>
<head>
<style>
p { width:400px; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button>Toggle</button>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
<script>
$("button").click(function () {
$("p").slideToggle("slow");
});
</script>
</body>
</html>Demo:
Example: 進(jìn)行動(dòng)畫(huà)的div之間的分隔與切換，使一些看起來(lái)和一些消失。
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#b977d1; margin:3px; width:60px;
height:60px; float:left; }
div.still { background:#345; width:5px; }
div.hider { display:none; }
span { color:red; }
p { clear: left; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div></div>
<div class="still"></div>
<div style="display:none;">
</div><div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>
<script>
$("#aa").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});
</script>
</body>
</html>