動畫基礎隱藏和顯示 jQuery

2022-08-20 16:18:15 字數 1643 閱讀 9766

讓頁面上的元素不可見,一般可以通過設定css的display為none屬性。但是通過css直接修改是靜態的布局,如果在**執行的時候,一般是通過js控制元素的style屬性,這裡jquery提供了乙個快捷的方法.hide()來達到這個效果

$elem.hide()
提供引數:

.hide( options )
當提供hide方法乙個引數時,.hide()就會成為乙個動畫方法。.hide()方法將會匹配元素的寬度,高度,以及不透明度,同時進行動畫操作

快捷引數:

.hide("fast / slow")
這是乙個動畫設定的快捷方式,'fast' 和 'slow' 分別代表200和600毫秒的延時,就是元素會執行200/600毫秒的動畫後再隱藏

注意:

jquery在做hide操作的時候,是會儲存本身的元素的原始屬性值,再之後通過對應的方法還原的時候還是初始值。比如乙個元素的display屬性值為inline,那麼隱藏再顯示時,這個元素將再次顯示inline。一旦透明度 達到0,display樣式屬性將被設定為none,這個元素將不再在頁面中影響布局

css中有display:none屬性,同時也有display:block,所以jquery同樣提供了與hide相反的show方法

方法的使用幾乎與hide是一致的,hide是讓元素顯示到隱藏,show則是相反,讓元素從隱藏到顯示

$('elem').hide(3000).show(3000)
讓元素執行3秒的隱藏動畫,然後執行3秒的顯示動畫。

show與hide方法是非常常用的,但是一般很少會基於這2個屬性執行動畫,大多情況下還是直接操作元素的顯示與隱藏為主

注意事項:

show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換,通常情況是需要先判斷元素的display狀態,然後呼叫其對應的處理方法。比如顯示的元素,那麼就要呼叫hide,反之亦然。 對於這樣的操作行為,jquery提供了乙個便捷方法toggle用於切換顯示或隱藏匹配元素

基本的操作:toggle();

這是最基本的操作,處理元素顯示或者隱藏,因為不帶引數,所以沒有動畫。通過改變css的display屬性,匹配的元素將被立即顯示或隱藏,沒有動畫。

display屬性將被儲存並且需要的時候可以恢復。如果乙個元素的display值為inline,然後是隱藏和顯示,這個元素將再次顯示inline

提供引數:.toggle( [duration ] [, complete ] )

同樣的提供了時間、還有動畫結束的**。在引數對應的時間內,元素會發生顯示/隱藏的改變,在改變的過程中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法

直接定位:.toggle(display)

直接提供乙個引數,指定要改變的元素的最終效果

其實就是確定是使用show還是hide方法

if ( display === true )  else if ( display === false )

toggle方法就是show與hide的相互切換的乙個快捷方法

JQUery 動畫 隱藏和顯示

切換3個布局 根據formid 進行切換 門資訊 1號門 控制方式 常開常閉 開門延時 s 進門 出門 所在區域 1號門 控制方式 常開常閉 開門延時 s 進門 出門 所在區域 2號門 控制方式 常開常閉 開門延時 s 進門 出門 所在區域 事件方法 function uppercase x els...

jQuery常用隱藏顯示動畫

本人用了animate 對layui框架做自定義發現顯示的時候無動畫。後來看了這篇文章才知道原來那麼多簡便的方式就可以實現顯示和隱藏,回想很久以前,貌似也學過,只是太久沒用忘了。動畫顯示,效果為 上下左右慢慢展開 300為動畫時間 某元素 show 動畫顯示,上下左右慢慢縮回隱藏 某元素 hide ...

jQuery 隱藏和顯示

jquery hide 和 show 通過 jquery,您可以使用 hide 和 show 方法來隱藏和顯示 html 元素 hide click function show click function 語法 selector hide speed,callback selector show ...