Jquery fadeIn 및 fadeOut background 명령

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]); 
});