jQuery隱藏元素的hide方法

在我們想要隱藏頁面中的某個元素時，我們會想到使用css樣式中的hover偽類。通過給元素設(shè)置hover屬性從而達到一個隱藏效果。

但是這個方法只適用于隱藏少部分的元素，在后期我們還想要將其他元素進行隱藏的時候會很麻煩，需要一個一個的添加屬性。

接下來我們將學會如何使用jQuery隱藏元素hide。

首先先搭建好頁面基礎(chǔ)樣式，放幾個button標簽作為按鈕：

其次我們給標簽設(shè)置css樣式，button標簽我們用作為點擊事件的。

div標簽就作為我們需要隱藏的元素。

我們需要實現(xiàn)的效果是，當我們點擊它們相對應的按鈕時會觸發(fā)相對應的效果。

當我們點擊到方塊一的隱藏元素按鈕時，我們的div1方塊就要進行一個隱藏操作，點擊顯示按鈕時div1方塊就要顯示出來。

同理第二個方塊也是同樣的操作，當我們第一次點擊按鈕的時候方塊就需要隱藏起來，第二次點擊就要進行顯示。

這里需要注意我們在兩個方塊的樣式中都設(shè)置了hover偽類。hover屬性中包含樣式只會在我們鼠標移到方塊上的時候顯示。想要進行隱藏效果還是需要display屬性。

第二個方塊中我們運用到了css動畫，分別設(shè)置了動畫運行的時間，播放函數(shù)以及次數(shù)等（看圖片注釋）。

接下來進入正題，兩個方塊我們使用不同的方法進行效果演示。首先方塊一我們直接使用hide（）方法。

先介紹一下speed是指動畫運行的時間

• easing：（Optional）是指切換效果
• fn：在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次

在我們了解后將他們帶入到方法中使用，動畫運行的時間是可以隨意改動的?？梢詫⑺臄?shù)值改大改小，這是我們會發(fā)現(xiàn)動畫運行的速度會大不同。

點擊運行就可以看到方塊一的隱藏和顯示效果。要記得再寫jQuery代碼的時候一定要插jQuery插件，否則會報錯。

這里可以看到div1方塊已經(jīng)被我們隱藏了，接下來是toggle（）方法。

仔細觀察我們會發(fā)現(xiàn)其實兩種方法之間的差別不是很大，只是toggle（）方法要相對應的簡潔更加的方便。

因為我們給第二方塊設(shè)置了動畫效果，所以在我們點擊按鈕的時候也會觸發(fā)css動畫效果。他會慢慢地消失，慢慢的出現(xiàn)。效果就需要自己慢慢的查看了。

jquery設(shè)置元素的顯示、隱藏

1.show()、hide()

• $(“#id”).show()表示為display：block;
• $(“#id”).hide()表示為display:none;
• $(“#id”).toggle()切換元素的可見狀態(tài)。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，則切換為可見的。

2.display

$(“#id”).css(‘display',‘none');//隱藏
$(“#id”).css(‘display',‘block');//顯示

或者

$(“#id”)[0].style.display=‘none';//隱藏
$(“#id”)[0].style.display=‘block';//顯示

3.visibility

$(“#id”).css(‘visibility',‘hidden');//元素隱藏
$(“#id”).css(‘visibility',‘visible');//元素顯示

區(qū)別：

• display:none —不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
• visibility:hidden— 使對象在網(wǎng)頁上不可見，但該對象在網(wǎng)頁上所占的空間沒有改變，即它仍然具有高度、寬度等屬性，通俗來說就是看不見但摸得到。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論