jQuery animation 다른 문구가 실행되지 않습니다

Question

안녕하세요 저는 Jquery를 사용하여 간단한 애니메이션을 만들려고하는데 문제가 있습니다. 이것은 내가 원하는 것입니다 : 페이지로드 첫 번째 이미지가 페이지의 상단에서 다음 4seconds 후 & 800 밀리 초 후에 맨 위로 애니메이션되고 사라질 것입니다. 첫 번째 이미지가 사라지면 두 번째 이미지가 위쪽에서부터 아래쪽으로 움직이며 4 초 후에 & 800 밀리 초가 지나면 애니메이션이 맨 위로 이동 한 후 사라집니다. 두 번째 이미지가 사라지면 세 번째 이미지가 위쪽에서부터 아래쪽으로 움직이며 4 초 후에 & 800 밀리 초가되면 애니메이션이 맨 위로 이동 한 후 사라집니다. 3 이미지 후이 내 CSS

#DivImgHolderFloat1{ 
     position: relative; 
     width: 350px; 
     border: 1px solid red; 
     float: right; 
     margin-right: 620px; 
     margin-top: 85px; 
     opacity: 0; 
    } 
     #ImgFloat1{ 
      width: 100%; 
     } 

    #DivImgHolderFloat2{ 
     position: relative; 
     width: 250px; 
     border: 1px solid red; 
     float: left; 
     margin-left: 400px; 
     margin-top: 85px; 
     opacity: 0; 
    } 
     #ImgFloat2{ 
      width: 100%; 
     } 

    #DivImgHolderFloat3{ 
     position: relative; 
     width: 1000px; 
     border: 1px solid red; 
     float: left; 
     margin-left: 230px; 
     opacity: 0; 
    } 
     #ImgFloat3{ 
      width: 100%; 
     } 

입니다

이 내 HTML

<div id="DivImgHolderFloat1"> 
    <img id="ImgFloat1" src="img/banner/Banner-1-float.png"> 
</div> 

<div id="DivImgHolderFloat2"> 
    <img id="ImgFloat2" src="img/banner/Banner-2-float.png"> 
</div> 

<div id="DivImgHolderFloat3"> 
    <img id="ImgFloat3" src="img/banner/Banner-3-float.png"> 
</div> 

입니다 .. 다시 1 차 이미지로 루프백한다 사라지는 이건 내 JQuery와

var img1 = "none"; 
var img2 = "up"; 
var img3 = "up"; 


if(img2 == "up" && img3 == "up"){ 
    $("#DivImgHolderFloat1").css({"top":"85px"}).animate({"top":"400px"}, "slow"); 
    $("#DivImgHolderFloat1").css({"opacity":"0.2"}).animate({"opacity":"1"}, "slow"); 
    img1 ="down"; 

    function img1GoingUp() { 
     if(img1 == "down"){ 
      $("#DivImgHolderFloat1").css({"top":"400px"}).animate({"top":"85px"}, "slow"); 
      $("#DivImgHolderFloat1").css({"opacity":"1"}).animate({"opacity":"0"}, "slow"); 
      img1 ="up"; 
     } 
    } 
    setInterval(img1GoingUp,4800); 
} 

if(img1 == "up" && img3 == "up"){ 
    $("#DivImgHolderFloat2").css({"top":"85px"}).animate({"top":"400px"}, "slow"); 
    $("#DivImgHolderFloat2").css({"opacity":"0.2"}).animate({"opacity":"1"}, "slow"); 
    img2 ="down"; 

    function img2GoingUp() { 
     if(img2 == "down"){ 
      $("#DivImgHolderFloat2").css({"top":"400px"}).animate({"top":"85px"}, "slow"); 
      $("#DivImgHolderFloat2").css({"opacity":"1"}).animate({"opacity":"0"}, "slow"); 
      img2 ="up"; 
     } 
    } 
    setInterval(img2GoingUp,4800); 
} 

if(img1 == "up" && img2 == "up"){ 
    $("#DivImgHolderFloat3").css({"top":"85px"}).animate({"top":"400px"}, "slow"); 
    $("#DivImgHolderFloat3").css({"opacity":"0.2"}).animate({"opacity":"1"}, "slow"); 
    img3 ="down"; 

    function img3GoingUp() { 
     if(img3 == "down"){ 
      $("#DivImgHolderFloat3").css({"top":"400px"}).animate({"top":"85px"}, "slow"); 
      $("#DivImgHolderFloat3").css({"opacity":"1"}).animate({"opacity":"0"}, "slow"); 
      img3 ="up"; 
     } 
    } 
    setInterval(img3GoingUp,4800); 
} 

입니다

Answer 1

JavaScript가 두 번 이상 실행될 것으로 예상됩니다. 그렇게 말하는 것은 아무것도 없습니다. img1GoingUp이 실행되고 해당 변수가 변경되면 모든 해당 if 문이 다시 실행되지 않습니다.

모든 실행하려는 경우 그 논리를 여러 번 경우는 자신의 기능에 있어야한다고하고 타이머 이벤트의 각각의 끝에서, 당신은 그것을 다시 실행합니다 :

var img1 = "none"; 
var img2 = "up"; 
var img3 = "up"; 

function animate() { 
    if(img2 == "up" && img3 == "up") { 
    var imgHolder = $("#DivImgHolderFloat1"); 
    imgHolder.css({"top":"85px"}).animate({"top":"400px"}, "slow"); 
    imgHolder.css({"opacity":"0.2"}).animate({"opacity":"1"}, "slow"); 
    img1 ="down"; 
    function img1GoingUp() { 
     if(img1 == "down"){ 
     imgHolder.css({"top":"400px"}).animate({"top":"85px"}, "slow"); 
     imgHolder.css({"opacity":"1"}).animate({"opacity":"0"}, "slow"); 
     img1 ="up"; 
     } 
     animate(); 
    } 
    setInterval(img1GoingUp,4800); 
    } 

    // The rest of the logic... 
} 

// Run the first time 
animate(); 

또 다른 문제는 을 사용해야 할 때 setInterval을 사용하고 있다는 것입니다. setInterval은 4800 ms마다 계속해서 반복되지만, animate은 여러 번 실행되기 때문에 시간이 지남에 따라 여러 개의 간격이 늘어나지 않도록하십시오.

Answer 2

이 접근법을 살펴보십시오. images을 (를) div (으)로 바꾸려면 HTML 및 CSS 코드를 수정했습니다. 여기에서는 각 단계마다 다른 기능을 정의해야하며 setInterval을 통하지 않고 setTimeout()을 통해 차례로 호출해야합니다. setInterval은 지정된 시간 간격 후에 setTimeout이 포함 된 코드를 한 번만 호출하는 각 간격 후에 무한 시간 코드를 호출합니다.

var img1 = "none"; 
 
var img2 = "up"; 
 
var img3 = "up"; 
 

 
OnPageLoad(); 
 

 
function OnPageLoad() { 
 
    if (img2 == "up" && img3 == "up") { 
 
    $("#DivImgHolderFloat1").css({ 
 
     "top": "85px" 
 
    }).animate({ 
 
     "top": "400px" 
 
    }, "slow"); 
 
    $("#DivImgHolderFloat1").css({ 
 
     "opacity": "0.2" 
 
    }).animate({ 
 
     "opacity": "1" 
 
    }, "slow"); 
 
    img1 = "down"; 
 

 
    setTimeout(img1GoingUp, 4800); 
 
    } 
 
} 
 

 
function img1GoingUp() { 
 
    if (img1 == "down") { 
 
    $("#DivImgHolderFloat1").css({ 
 
     "top": "400px" 
 
    }).animate({ 
 
     "top": "85px" 
 
    }, "slow"); 
 
    $("#DivImgHolderFloat1").css({ 
 
     "opacity": "1" 
 
    }).animate({ 
 
     "opacity": "0" 
 
    }, "slow"); 
 
    img1 = "up"; 
 

 
    SecondStep(); 
 
    } 
 
} 
 

 
function SecondStep() { 
 
    if (img1 == "up" && img3 == "up") { 
 
    $("#DivImgHolderFloat2").css({ 
 
     "top": "85px" 
 
    }).animate({ 
 
     "top": "400px" 
 
    }, "slow"); 
 
    $("#DivImgHolderFloat2").css({ 
 
     "opacity": "0.2" 
 
    }).animate({ 
 
     "opacity": "1" 
 
    }, "slow"); 
 
    img2 = "down"; 
 

 
    setTimeout(img2GoingUp, 4800); 
 
    } 
 

 
} 
 

 
function img2GoingUp() { 
 
    if (img2 == "down") { 
 
    $("#DivImgHolderFloat2").css({ 
 
     "top": "400px" 
 
    }).animate({ 
 
     "top": "85px" 
 
    }, "slow"); 
 
    $("#DivImgHolderFloat2").css({ 
 
     "opacity": "1" 
 
    }).animate({ 
 
     "opacity": "0" 
 
    }, "slow"); 
 
    img2 = "up"; 
 

 
    ThirdStep(); 
 
    } 
 
} 
 

 
function ThirdStep() { 
 
    if (img1 == "up" && img2 == "up") { 
 
    $("#DivImgHolderFloat3").css({ 
 
     "top": "85px" 
 
    }).animate({ 
 
     "top": "400px" 
 
    }, "slow"); 
 
    $("#DivImgHolderFloat3").css({ 
 
     "opacity": "0.2" 
 
    }).animate({ 
 
     "opacity": "1" 
 
    }, "slow"); 
 
    img3 = "down"; 
 

 
    setTimeout(img3GoingUp, 4800); 
 
    } 
 
} 
 

 
function img3GoingUp() { 
 
    if (img3 == "down") { 
 
    $("#DivImgHolderFloat3").css({ 
 
     "top": "400px" 
 
    }).animate({ 
 
     "top": "85px" 
 
    }, "slow"); 
 
    $("#DivImgHolderFloat3").css({ 
 
     "opacity": "1" 
 
    }).animate({ 
 
     "opacity": "0" 
 
    }, "slow"); 
 
    img3 = "up"; 
 

 
    OnPageLoad(); 
 
    } 
 
}

.circleBase { 
 
    border-radius: 50%; 
 
    behavior: url(PIE.htc); 
 
    /* remove if you don't care about IE8 */ 
 
} 
 
.type1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: yellow; 
 
    border: 3px solid red; 
 
} 
 
#DivImgHolderFloat1 { 
 
    position: relative; 
 
    float: right; 
 
    
 
    opacity: 0; 
 
} 
 
#ImgFloat1 { 
 
    width: 100%; 
 
} 
 
#DivImgHolderFloat2 { 
 
    position: relative; 
 
    float: left; 
 
    
 
    opacity: 0; 
 
} 
 
#ImgFloat2 { 
 
    width: 100%; 
 
} 
 
#DivImgHolderFloat3 { 
 
    position: relative; 
 
    float: left; 
 
    opacity: 0; 
 
} 
 
#ImgFloat3 { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="DivImgHolderFloat1"> 
 
    <div class="circleBase type1"></div> 
 
</div> 
 

 
<div id="DivImgHolderFloat2"> 
 
    <div class="circleBase type1"></div> 
 
</div> 
 

 
<div id="DivImgHolderFloat3"> 
 
    <div class="circleBase type1"></div> 
 
</div>

참고 : 전체 화면 모드에서 실행중인 코드를 참조하십시오.