JQuery是一種流行的JavaScript庫，它可以輕松地操作HTML元素。其中一個非常有用的功能是設置圖片進入效果。這個效果會讓圖片在頁面中出現時，從某個方向飛進來。下面我們來一步步學習如何設置這個效果。

$(document).ready(function(){
$("#img1").hide();
$("#img2").hide();
$("#img3").hide();
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
$(".fadein").each(function(){
var topDistance = $(this).offset().top;
if((topDistance - scrollTop) < windowHeight){
$(this).animate({opacity:'1',left:'0px'},800);
}
});
});
});

首先，我們需要在HTML中設置好圖片，并且給它們一個共同的class（例如：class=”fadein”）。然后在CSS中設置這個class的初始樣式：

.fadein {
opacity: 0;
position: relative;
left: -50px;
}

上面的代碼將圖片的透明度設置為0，這樣它們就不會在頁面中顯示。這個class的left屬性被設置為-50像素，這是為了使圖片在屏幕外，并等待動畫效果的觸發。接下來我們看看JavaScript代碼的工作原理。

代碼中首先隱藏了所有的圖片，然后通過頁面的滾動事件來檢測哪些圖片需要顯示。通過循環檢查每一個class=”fadein”的元素，檢測它離頁面頂部的距離是否小于頁面高度。如果滿足條件，我們就通過animate()函數來設置圖片進入的動畫效果。

通過這個簡單的代碼設置，我們就可以輕松地為頁面添加圖片進入效果，為用戶帶來更好的閱讀體驗。