jQuery淡出圖像

Question

我有一個代碼來更改每個固定間隔的圖像，但這個圖像通常只是在變化。我如何使用淡入淡出選項加入我的代碼，以便它將逐漸淡出以打開新圖像。我的代碼如下

$(document).ready(function() { 
     (function() { 
      var curImgId = 0; 
      var numberOfImages = 2; 
      window.setInterval(function() { 
       $('body').css('background-image','url(bg' + curImgId + '.jpg)'); 
       curImgId = (curImgId + 1) % numberOfImages; 
      }, 15 * 100); 
     })(); 
}); 

Answer 1

你可以不褪色的背景圖片。你只能淡出元素（但衰落body會褪色的所有內容以及）

您需要將其添加爲一個元素，把它放在別人後面..和淡出該元素與.fadeIn()和.fadeOut()

Answer 2

你可以淡出元素爲零的不透明度，然後更改背景圖片，然後漸回1：

$(document).ready(function() { 
     (function() { 
      var curImgId = 0; 
      var numberOfImages = 2; 
      window.setInterval(function() { 
       $('body').fadeTo(500, 0, function(){ 
        $(this).css('background-image','url(bg' + curImgId + '.jpg)'); 
        $(this).fadeTo(500, 1); 
       }); 
       curImgId = (curImgId + 1) % numberOfImages; 
      }, 15 * 100); 
     })(); 
}); 

Answer 3

你可以看看這個帖子：
CSS3 background image transition。
這是一個很好的解決方案與CSS。