하나의 div를 페이드 아웃하고 Jquery를 사용하여 다른 div에서 동시에 페이드 아웃하는 방법

Question

세 개의 div,
newDivforWraping1,#newDivforWraping5,#newDivforWraping9이 있습니다.

나는 fadeIn에 newDivforWraping1 사업부를 원하고 #newDivforWraping5,#newDivforWraping9

을 페이드 아웃을 한 후 newDivforWraping1,#newDivforWraping9
및 fadein # newDivforWraping5 and finally fadeIn # newDivforWraping9`

및 페이드 아웃 #newDivforWraping1,#newDivforWraping9을 페이드 아웃.

화면의 어느 지점에서 나는 div 만 보았습니다. 친절

<div1>--fade In 
<div2>--fade Out 
<div3>--fade Out 

<div2>--fade In 
<div3>--fade Out 
<div1>--fade Out 

<div3>--fade In 
<div1>-fade Out 
<div2> -- fade Out 

입니다

가 화면에 나타납니다 어떤 DIV,이 화면에서 같은 위치에 있는지 알 수 있습니다. 이 프로세스를 반복하려면 setInterval을 사용하여 타이머를 설정했지만 사용자가 마우스를 가져 가면 일시 중지 (가능하지 않은 경우 중지)합니다. 마우스가 움직이지 않으면 다시 시작하십시오. 여기에 my code이 있으며 내 현재 부분적으로 작동하는 솔루션을 볼 수 있습니다. 도와 주셔서 감사합니다.

Answer 1

는

(function() { 
var i = 1; 
var timer=setInterval(function() { 
    if(i>3) {i=1}; 
    runAnimation(i, i, i); 
    i++; 
},1000); //increase it to 3000 if each fade in runAnimation is up to 1000 on function runAnimation 


function runAnimation(a,b,g){ 
    c = a == 1? 'fadeIn' : 'fadeOut'; 
    d = b == 2? 'fadeIn' : 'fadeOut'; 
    h = g == 3? 'fadeIn' : 'fadeOut'; 

    $("#newDivforWraping1")[c](0); //if a ==1 then $("#newDivforWraping1").fadeIn(0) else $("#newDivforWraping1").fadeOut(0) 
    $("#newDivforWraping5")[d](0); 
    $("#newDivforWraping9")[h](0); 
} 

$("#newDivforWraping1,#newDivforWraping5,#newDivforWraping9").hover(function() { 
    clearInterval(timer); 
}, function(){ 
    timer=setInterval(function() { 
    if(i>3) {i=1}; 
    runAnimation(i, i, i); 
    i++; 
},1000); 
});  

})(); 

http://jsfiddle.net/RQNrt/32/

Answer 2

동시에 둘 다 수행하려면 두 번째 호출에 fadeIn/fadeOut 콜백을 사용하지 마십시오. HJavascript가 nex fading FX direct를 실행하기 때문에.

$("#newDivforWraping1").fadeIn(1000); 
$("#newDivforWraping5").fadeOut(1000);