페이드 인 및 페이드 아웃 효과를 삽입하는 방법은 무엇입니까?

Question

이 코드는 20 초마다 배경을 변경합니다.

어떻게 페이드 인과 페이드 아웃 효과를 삽입합니까?

내 jQuery 코드

var bg = $('#bg'); 
    var backgrounds = new Array(
     'url(1.jpg)', 
     'url(2.jpg)', 
     'url(3.jpg)', 
     'url(4.jpg)'); 

    var current = 0; 

    function nextBackground() { 
     bg.css(
      'background', 
     backgrounds[current = ++current % backgrounds.length]); 
     setTimeout(nextBackground, 20000); 
    } 

    setTimeout(nextBackground, 20000); 
    bg.css('background', backgrounds[0]); 

Answer 1

TKS! 나는 하나 개의 솔루션을 발견

코드

var에 currentBackground = 0;

var backgrounds = [];

배경 [0] = '2.jpg';

배경 [1] = '3.jpg';

배경 [2] = '4.jpg';

배경 [3] = '5.jpg';

배경 [4] = '6.jpg';

changeBackground 함수() {

currentBackground++; 

if(currentBackground > 4) currentBackground = 0; 

$('#bg').fadeOut(500,function() { 
    $('#bg').css({ 
     'background-image' : "url('" + backgrounds[currentBackground] + "')" 
    }); 
    $('#bg').fadeIn(500); 
}); 


setTimeout(changeBackground, 30000); 

}

$ (문서)를 .ready (함수() {

setTimeout(changeBackground, 30000); 

});