jquery監聽頁面顯示隱藏

在網頁開發中，常常會遇到需要動態控制元素的顯示與隱藏的情況。例如，使用者登入成功後，顯示歡迎訊息；或在捲動頁面時，當某一個元素捲動到螢幕中央時，開啟元素的動畫效果。針對這些需求，jQuery提供了一些API來實現監聽頁面的顯示與隱藏。

一、$(window).scroll()方法

$(window).scroll()方法表示當視窗捲動時觸發的事件處理函數。透過監聽視窗的捲動事件，可以實現某個元素的動態顯示或隱藏效果。

下面是一個範例程式碼，當滾輪捲動到距離頁面頂部500px的位置時，頁面中的一個元素將會顯示出來：

$(window).scroll(function(){
  if($(window).scrollTop() >= 500){
    $("#element").show();
  }
});

程式碼解釋：

• #$(window).scroll()：監聽視窗的滾動事件；
• $(window).scrollTop()：取得視窗目前捲動的距離；
• if($( window).scrollTop() >= 500)：如果滾輪滾動的距離達到或超過500px，則執行下面的程式碼；
• $("#element").show()：將id為“ element」的元素顯示出來。

二、$(window).resize()方法

$(window).resize()方法表示當視窗尺寸改變時觸發的事件處理函數。透過監聽視窗的尺寸變化事件，可以動態調整頁面中元素的大小和位置。

下面是一個範例程式碼，當視窗的寬度小於等於768px時，頁面中的一個元素將會隱藏：

$(window).resize(function(){
  if($(window).width() <= 768){
    $("#element").hide();
  }
});

程式碼解釋：

##$ (window).resize()：監聽視窗的尺寸變化事件；
$(window).width()：取得視窗的寬度；
if($(window).width( ) <= 768)：如果視窗的寬度小於等於768px，則執行下面的程式碼；
$("#element").hide()：將id為「element」的元素隱藏起來。

$(window).load(function(){
  $("#element").show();
});

$(window).load()：監聽頁面所有元素（包含圖片等資源）載入完成事件；
• $("#element").show()：將id為「element」的元素顯示出來。

$(element).fadeIn() / $(element).fadeOut()：實作元素的漸入/漸出效果；
• $(element).slideDown() / $(element ).slideUp()：實作元素的下拉/上拉效果；
• $(element).toggle()：實作對元素的顯示與隱藏的切換。

以上是jquery監聽頁面顯示隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！