選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

jQuery 效果 - 滑動


jQuery 的滑動方法可以向上或向下滑動元素。

點選此處滑動面板展開/摺疊

因為時間寶貴,我們提供快速簡便的學習。

在 W3Schools,您可以用便捷易懂的方式學習所有您需要掌握的知識。


示例

jQuery slideDown()
演示 jQuery slideDown() 方法。

jQuery slideUp()
演示 jQuery slideUp() 方法。

jQuery slideToggle()
演示 jQuery slideToggle() 方法。


jQuery 滑動方法

使用 jQuery,您可以為元素建立滑動效果。

jQuery 具有以下滑動方法

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用於向下滑動一個元素。

語法

$(選擇器).slideDown(速度,回撥函式);

可選的 speed 引數指定了效果的持續時間。它可以接受以下值:“slow”(慢)、“fast”(快)或毫秒。

可選的回撥函式引數是在滑動完成後執行的一個函式。

下面的示例演示了 slideDown() 方法

示例

$("#flip").click(function(){
  $("#panel").slideDown();
});
自己動手試一試 »


jQuery slideUp() 方法

jQuery slideUp() 方法用於向上滑動一個元素。

語法

$(選擇器).slideUp(速度,回撥函式);

可選的 speed 引數指定了效果的持續時間。它可以接受以下值:“slow”(慢)、“fast”(快)或毫秒。

可選的回撥函式引數是在滑動完成後執行的一個函式。

下面的示例演示了 slideUp() 方法

示例

$("#flip").click(function(){
  $("#panel").slideUp();
});
自己動手試一試 »

jQuery slideToggle() 方法

jQuery slideToggle() 方法在 slideDown()slideUp() 方法之間切換。

如果元素已被向下滑動,slideToggle() 將會向上滑動它們。

如果元素已被向上滑動,slideToggle() 將會向下滑動它們。

$(選擇器).slideToggle(速度,回撥函式);

可選的速度引數可以取以下值:“slow”(慢)、“fast”(快)、毫秒。

可選的回撥函式引數是在滑動完成後執行的一個函式。

下面的示例演示了 slideToggle() 方法

示例

$("#flip").click(function(){
  $("#panel").slideToggle();
});
自己動手試一試 »

jQuery 練習

透過練習來測試自己

練習

使用 jQuery 方法 **向上滑動** 一個 <div> 元素。

$("div").();

開始練習


jQuery Effects 參考

要檢視所有 jQuery 效果的完整概述,請訪問我們的 jQuery 效果參考


×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援