jQuery Array fadeIn이 작동하지 않습니다.

Question

div의 배열에있는 fadeOut 항목을 페이드 인하려고합니다. 나는이 작업을 fadeInfadeOut 방식으로 만들기 위해 노력하고 있습니다. 따라서 첫 번째 항목은 3 초 동안 머무르고 페이드 아웃 한 다음 다음 항목은 페이드 인되고 3seocnds는 다음 단계로 페이드 아웃됩니다 ..... 내 코드가 왜 잘못 되었습니까? http://jsfiddle.net/Fpu2E/1/

Answer 1

코드는 여러 가지 이유로 작동하지 않습니다. fadeOut과 fadeIn을 호출하는 사이에 지연이 없으므로 페이드 인/아웃 사이에 원하는 지연 시간을 3 초간 얻지 못합니다. 두 함수 모두 jQuery 효과 대기열에 이상한 영향을 미칩니다.

이

var div = $('div').hide(), 
    news = ['news1', 'news2', 'news3'], 
    count = 0; 

function changeNews() { 
    div.fadeIn(3000).delay(3000).fadeOut(3000, function() { 
     changeNews(); 
    }).text(news[count++]); 
} 

changeNews(); 

이의 간단한 데모는 여기에서 찾을 수 있습니다 : http://jsfiddle.net/Fpu2E/4/이

Answer 2

이 작동 ...

var news = ['news1', 'news2', 'news3'], 
    count = news.length, 
    currentItem = 0; 

showNextItem = function() { 

    $('div').text(news[currentItem++]).fadeIn(3000, function() { 
     var element = $(this); 
     setTimeout(function() { 
      element.fadeOut(1000, function() { 
       if (currentItem < count) { 
        showNextItem(); 
       } 
      }); 

     }, 3000); 
    }); 

}; 

showNextItem(); 

jsFiddle을 확인합니다.