jQuery slideToggle()

admin發表於2018-02-05
jQueryIDE

此方法通過高度變化來切換所有匹配元素的可見性。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.slideToggle([duration ] [, complete ])

引數解析:

（1）.duration:可選，規定動畫持續的時間，預設值是400毫秒。

（2）.complete:可選，動畫執行完後，執行的回撥函式。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.slideToggle(options)

引數解析:

options:一組包含動畫選項的值的集合。 

支援的選項:

（1）.duration:規定動畫持續時間，預設值是400毫秒；值可以是三種預定的值（"slow", "normal", 或 "fast）或表示動畫時長的毫秒數值(如：1000) ）。

（2）.easing：一個字串，表示過渡使用哪種緩動函式，預設值是"swing"。jQuery自身提供"linear"和"swing"，其他效果可以使用jQuery Easing Plugin外掛。

（3）.queue:布林值，規定是否將動畫放置在效果佇列中，如果為false時，將立即開始動畫。 從jQuery1.7開始，佇列選項也可以接受一個字串，在這種情況下，在動畫被新增到由該字串表示的佇列中。當一個自定義的佇列名稱被使用，動畫不會自動啟動;你必須呼叫.dequeue("queuename")來啟動它。

（4）.specialEasing:一組一個或多個通過相應的引數和相對簡單函式定義的CSS屬性(jQuery1.4新增)。

（5）.step:每個動畫元素的每個動畫屬性將呼叫的函式。

（6）.progress:每一步動畫完成後呼叫的一個函式，無論動畫屬性有多少，每個動畫元素都執行單獨的函式(jQuery1.8新增)。

（7）.complete:在動畫完成時執行的函式。

（8）.done:在動畫完成時執行的函式(Promise物件狀態已完成)(jQuery1.8新增)。

（9）.fail:動畫失敗完成時執行的函式。(Promise物件狀態未完成)(jQuery1.8新增)。

（10）.always:在動畫完成或未完成情況下停止時執行的函式(Promise物件狀態已完成或未完成)(jQuery1.8新增)。

jQuery1.0版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
.slideToggle([duration ] [, easing ] [, complete ])

引數解析:

（1）.duration:可選，規定動畫持續時間，預設值是400毫秒。

（2）.easing：可選，一個字串，表示過渡使用哪種緩動函式，預設值是"swing"。jQuery自身提供"linear"和"swing"，其他效果可以使用jQuery Easing Plugin外掛。

（3）.complete:在動畫完成時執行的函式。

jQuery1.4.3版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  background:#060;
  width:300px;
  height:300px;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">  
$(document).ready(function(){ 
  $("#bt").click(function () {
    $("div").slideToggle(1000); 
  }); 
}) 
</script>
</head>
<body>
<div></div>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

點選按鈕可以實現div元素顯示和隱藏的切換。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  background:#060;
  width:300px;
  height:300px;
  line-height:300px;
  text-align:center;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">  
$(document).ready(function(){ 
  $("#bt").click(function () {
    $("div").slideToggle(1000, function () {
      $(this).text("螞蟻部落");
    });
  }); 
}) 
</script>
</head>
<body>
<div></div>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

當動畫執行完成會執行回撥函式。

相關文章