Javascript image image cross-fade on page change

我是一個新手HTML開發人員，雖然我還沒有教過JavaScript，但我想將其包含在我的第一個更大的網頁中。
我的佈局看起來像這樣，標題，菜單和圖片在頂部。Javascript image image cross-fade on page change

基於所述選擇的菜單項的圖像的變化。
我想要做的是使圖像彼此之間平滑淡化，但我在互聯網上找到的指南只描述堆疊在彼此頂部的圖像以創建圖庫。

我該如何指定每個圖像到HTML頁面？它是否工作，或者我將不得不大幅改變我的網頁，只改變內容，不加載單獨的HTML？

來源

2014-11-05 Tallmios

如果您加載新頁面，則無法進行轉換（您可以但會吸）。您需要使用AJAX或其他內容已經加載並顯示它，而不是轉到其他頁面。 – 2014-11-05 15:27:36

這是僅用於圖像還是會在圖像下方顯示內容？對於任何類型的動畫，我都會推薦[wowjs]（http://mynameismatthieu.com/WOW/），它可以幫助您在[animate css]中使用動畫（http://daneden.github.io/animate.css /） – ODelibalta 2014-11-05 15:28:33

隨着我網頁的基本功能和僅使用HTML，我可能會通過這個概念。感謝你的回答。 @Sage在圖像下面會有內容（段落）和頁腳。 – Tallmios 2014-11-05 15:31:37

瀏覽jQuery的動畫功能：它是這樣的：

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

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

對於這個工作，你有你的形象CSS設置不透明度：0，所以它可以不透明度0和不透明度1之間的動畫（這就是所謂的淡入）

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

來源

2014-11-05 15:30:50 ErikBrandsma

Javascript image image cross-fade on page change

回答

相關問題