jQuery slideUp()

admin發表於2018-01-27

此方法通過高度變化(向上減小)來動態地隱藏所有匹配的元素。

語法結構一:

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

引數解析:

(1).duration:可選,規定動畫持續的時間,預設值是400毫秒。

(2).complete:可選,動畫執行完後,執行的回撥函式。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.slideUp(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] 純文字檢視 複製程式碼
.slideUp([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").slideUp(5000);
  })
})
</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;
  display:none;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function () {
    $("div").slideUp(5000, function () {
      $(this).text("螞蟻部落");
    });
  })
})
</script> 
</head>
<body>
<div></div>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

點選按鈕可以將div向上捲起隱藏,當隱藏完畢可以執行回撥函式。

相關文章