jQuery隱藏元素的hide方法

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

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

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

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

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

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

我們需要實現的效果是，當我們點擊它們相對應的按鈕時會觸發相對應的效果。

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

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

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

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

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

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

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

在我們了解后將他們帶入到方法中使用，動畫運行的時間是可以隨意改動的。可以將它的數值改大改小，這是我們會發現動畫運行的速度會大不同。

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

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

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

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

jquery設置元素的顯示、隱藏

1.show()、hide()

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

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');//元素顯示

區別：

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