圖片淡入另一個，然後功能加載新的網頁

Question

基本上我試圖去效果類似於this。

我想使我的網站的第一頁有一個圖像通過點擊一個按鈕淡入另一個圖像，然後有一個功能打開一個不同的頁面大約2秒後，使用計時器。

我有用於切換基於上述示例的圖像的代碼，我對JavaScript不太熟練，所以我的麻煩是編寫一個JavaScript函數，該函數會在第二秒後加載一個新頁面圖像出現。

Answer 1

而不是使用CSS動畫像例子中，使用jQuery做動畫，使用完整功能做轉發：

$("#cf_onclick").click(function() { 
    $("#cf_onclick").animate(
     {"background-image": "img2.jpg"}, 
     2000, 
     'linear', 
     function() { 
      window.location.href = "page2.html"; 
     } 
    ); 
}); 

你也應該考慮把兩個圖像在一個圖像文件並切換背景位置或覆蓋兩個img標籤並淡出第一個，否則瀏覽器將需要在動畫開始時加載第二個圖像。