jquery fadeIn和fadeout後臺命令

Question

我有一個滾動的背景圖像使用jquery工作正常。但是我試圖讓圖像變化之間的轉換更加平滑，並且看起來不起作用。我確定它與我使用的「fadeout」線有關。

$(function() { 
var body = $('body'); 
var backgrounds = new Array(
    'url(images/hso-boardwalk-background.jpg)', 
    'url(images/hso-palmtree-background.jpg)' 
); 

var current = 0; 

function nextBackground() { 
body.css(
    'background', 
    backgrounds[current = ++current % backgrounds.length] 
); 

setTimeout(nextBackground, 5000); 
    $('background').fadeOut("slow"); 
} 
setTimeout(nextBackground, 5000); 
    body.css('background', backgrounds[0]); 
}); 

Answer 1

您不能僅使用正文背景圖像進行平滑過渡。作爲一種變通方法，你可以嘗試使用臨時DIV如下：

SEE DEMO

$(function() { 
    var body = $('body'); 
    var backgrounds = new Array(
     'url(images/hso-boardwalk-background.jpg)', 
     'url(images/hso-palmtree-background.jpg)' 
    ); 


    var current = 0; 

    function nextBackground() { 
     var bckg = backgrounds[current = ++current % backgrounds.length]; 
     var tmpDIV = $('<div/>', { 
      id: "tmpDIV" 
     }).prependTo('body').hide().css({ 
      position: "absolute", 
      zIndex:-1, 
      top:0, 
      left:0, 
      height: $(window).height(), 
      width: $(window).width(), 
      background: bckg 
     }).fadeIn("slow", function() { 
      body.css('background',bckg); 
      $(this).remove(); 
     }); 


     setTimeout(nextBackground, 5000); 

    } 
    setTimeout(nextBackground, 5000); 
    body.css('background', backgrounds[0]); 
});