jQuery toggle()

admin發表於2017-02-17
jQuery

此方法實現匹配元素顯示或隱藏切換。

語法結構一:

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

引數解析:

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

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

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.toggle(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] 純文字檢視 複製程式碼
.toggle([duration ] [, easing ] [, complete ])

引數解析:

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

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

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

jQuery1.4.3版本新增。

語法結構四:

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

引數解析:

display:布林值，如果是true，規定元素顯示；false，規定元素隱藏。

jQuery1.3版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>toggle()函式-螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  background-color:#ccc;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
     $("div").toggle();
  })
})
</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{
  width:100px;
  height:100px;
  background-color:#ccc;
  margin:5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("#ant_1").toggle(3000, function () {
      $("#ant_2").text("螞蟻部落")
    });
  })
})
</script>
</head>
<body>
  <div id="ant_1">螞蟻部落</div>
  <div id="ant_2"></div>
  <input type="button" id="bt" value="檢視演示" />
</body>
</html>

當動畫完成之後會指定回撥函式。

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

當引數為false，元素只能被隱藏，不能被顯示。

相關文章