Javascript圖片淡入淡出頁面更改

Question

我是HTML新手，雖然我完全沒有學過Javascript，但是我想將其包含在我的第一個更大的網頁中。
我的布局看起來像這樣，標題，菜單和圖像在頂部。

圖像根據所選菜單項而改變。
我想做的是使圖像彼此之間平滑消失，但是我在Internet上找到的指南僅描述了堆疊在一起的圖像以創建畫廊。

如何將每個圖像指定到HTML頁面？ 它是否有效，還是我必須徹底更改網頁以僅更改內容而不加載單獨的HTML？

Answer 1

看一下JQuery的動畫函數：像這樣：

$("#idOfYourImage").animate({opacity: 1}, 1000, function(){
  //Function to be executed when the animation is done
})

第二個參數（1000）代表動畫的持續時間。

為此，您必須將圖像css設置為opacity：0，以便可以在不透明度0和不透明度1之間進行動畫處理（這稱為“淡入”）

美元符號代表JQuery，您必須包含該腳本才能使其工作