国产视频app在JQ的設置前端web頁面的動畫中,我們有時候需要對指定元素的高度進行設置,比如指定一個DIV標簽的高度從0到我們設置好的高度,或是從我們設置好的高到0。如果想實現這種效果我們該如何去做呢?

JQ中的slideUp方法解釋

slideUp():通過使用滑動效果,隱藏被選元素,如果元素已顯示出來的話。

語法:

$(selector).slideUp(speed,callback)

speed:可選,表示動畫運行的時候

国产视频appcallback:表示函數執行完后,要執行的函數

JQ中的slideDown()方法解釋

国产视频appslideDown():通過使用滑動效果,顯示被選元素,如果元素已隱藏的話。

語法:

$(selector).slideUp(speed,callback)

国产视频appspeed:可選,表示動畫運行的時候

国产视频appcallback:表示函數執行完后,要執行的函數

舉例說明一下

利用slideUp()與slideDown()方法,顯示與隱藏元素

HTML代碼

利用slideUp()與slideDown()方法,顯示與隱藏元素

<div style="width:400px">
你好,歡迎訪問我的博客(飛鳥慕魚博客),如果你對
本博客有什么好的建議或想購買本博客出品的Z-blog主題,可以
聯系我或是給我留言哦!
</div>
<button id='button'>隱藏</button>
<button id='button2'>顯示</button>

JQ代碼

$("#button").click(function () {
    $("div").slideUp();
 });
$("#button2").click(function(){
    $("div").slideDown();
});

結果:

點擊隱藏按鈕后:DIV會從下到上縮短并隱藏

国产视频app點擊顯示按鈕后,DIV會從上到下伸展并顯示

JQ中的slideToggle()方法解釋與介紹

slideToggle() 方法通過使用滑動效果(高度變化)來切換元素的可見狀態。

語法:

$(selector).slideToggle(speed,callback)

speed:可選,表示動畫運行的時候

callback:表示函數執行完后,要執行的函數

舉例子說明問題

利用slideToggle()方法,點擊按鈕讓DIV顯示或隱藏

HTML代碼

利用slideToggle()方法,點擊按鈕讓DIV顯示或隱藏

<div style="width:400px">
你好,歡迎訪問我的博客(飛鳥慕魚博客),如果你對
本博客有什么好的建議或想購買本博客出品的Z-blog主題,可以
 聯系我或是給我留言哦!
</div>
<button id='button'>隱藏/顯示</button>

JQ代碼

$("#button").click(function () {
    $("div").slideToggle();
});

結果:

點擊按鈕,DIV會在顯示與隱藏兩種狀態中切換