jQuery slideUp()
此方法通過高度變化(向上減小)來動態地隱藏所有匹配的元素。
語法結構一:
[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向上捲起隱藏,當隱藏完畢可以執行回撥函式。
相關文章
- 4.2.3: jQuery動畫之slideUp()方法和slideDown()方法jQuery動畫IDE
- slideUp()方法和slideDown()方法IDE
- 原生js造輪子之模仿JQ的slideDown()與slideUp()JSIDE
- jQuery初探:自制jQueryjQuery
- 我的’jQuery’和jQueryjQuery
- 我的''jQuery''和jQueryjQuery
- 【Jquery】jquery 基本的動畫jQuery動畫
- 【Jquery】jquery 自定義動畫jQuery動畫
- jQuery :not()jQuery
- jQuery not()jQuery
- jQuery is()jQuery
- jQuery()jQuery
- jQuery on()jQuery
- jQueryjQuery
- JQuery模板外掛-jquery.tmpljQuery
- jquery列印頁面(jquery.jqprint)jQuery
- jQuery入門(三)--- jQuery語法jQuery
- jQuery 3教程(一):jQuery介紹jQuery
- jQuery之使用jQuery.fn.prop()替換jQuery.fn.attr()jQuery
- JQuery基本知識彙總;JQuery常用方法;淺入瞭解JQueryjQuery
- (jQuery) jQuery中的事件與動畫(上)jQuery事件動畫
- jquery.fn.extend與jquery.extendjQuery
- jQuery 1.10.0 和 jQuery 2.0.1 釋出jQuery
- jQuery表單外掛jQuery.formjQueryORM
- jQuery 3教程(二):jQuery選擇器jQuery
- jQuery心得2--jQuery案例剖析1jQuery
- jQuery初探jQuery
- jQuery碎片jQuery
- JQuery動畫jQuery動畫
- 分解jQueryjQuery
- jquery的onjQuery
- jquery事件jQuery事件
- jQuery AjaxjQuery
- jQuery 事件jQuery事件
- jQuery 尺寸jQuery
- jQuery - AJAXjQuery
- jQuery htmljQueryHTML
- jQuery prependTo()jQuery