在按鈕點擊css動畫後隱藏div

Question

作爲當前時間，我點擊了按鈕時觸發了CSS3動畫，並且一切正常。它是一個代表植物生命週期的動畫，分5個階段進行工作，每個階段都顯示一幅圖像和相應的文字。但是，如果我點擊了第一階段，然後是第二階段，並且想要再次點擊第一階段以再次查看支持文本，同時從第二階段隱藏圖像，我似乎無法做到這一點。

的jsfiddle您的舒適：

http://jsfiddle.net/YUC3d/

當前階段的現場查看：

http://www.mattmeadows.info/MFTW2/howplantsgrow.html

的Javascript：

$(function() { 
    $("#stage1").click(function() { 
     $("#Seed1,#infoBox1").toggleClass("animate") 
    }); 
    $("#stage2").click(function() { 
     $("#Seed2,#infoBox2").toggleClass("animate") 
    }); 
    $("#stage3").click(function() { 
     $("#Seed3,#infoBox3").toggleClass("animate") 
    }); 
    $("#stage4").click(function() { 
     $("#Seed4,#infoBox4").toggleClass("animate") 
    }); 
    $("#stage5").click(function() { 
     $("#Seed5,#infoBox5").toggleClass("animate") 
    }); 
}); 

HTML段是動畫：

<div id="Seed1" class="target"> 
</div> <!-- end of Seed1 --> 
<div id="infoBox1"> 
Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 
</div> 

（總共有

CSS這些DIV組合5：

@-webkit-keyframes show 
{ 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

#Seed1 
{ 
opacity:0; 
} 

#Seed1.animate 
{ 
-webkit-animation-name: show; 
-webkit-animation-duration: 2s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 0; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 

#infoBox1 
{ 
width: 400px; 
height: 100px; 
background:white; 
position: absolute; 
bottom: 425px; 
margin-left: 25px; 
border-radius: 10px; 
opacity:0; 
} 

#infoBox1.animate 
{ 
-webkit-animation-name: show; 
-webkit-animation-duration: 2s; 
-webkit-animation-timing-function: ease; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
-webkit-animation-delay: 0; 
-webkit-animation-play-state: running; 
-webkit-animation-fill-mode: forwards; 
} 

Answer 1

。假定「動畫」是「接通」類（它似乎是），嘗試使該復位然後一切動畫的特定元件的方法：

function setStage(stage) { 

    var numberOfStages = 5; 

    for (i=1; i <= numberOfStages; i++) { 
     if (i == stage) { 
      $("#infoBox" + i).addClass("animate"); 
      $("#Seed" + i).addClass("animate"); 
     } else if (i < stage) { 
      $("#infoBox" + i).removeClass("animate"); 
      $("#Seed" + i).addClass("animate"); 
     } else { 
      $("#infoBox" + i).removeClass("animate"); 
      $("#Seed" + i).removeClass("animate"); 
     } 
    } 

} 

實施例使用：

$(document).ready(function() { 

    $("#stage1").click(function() { 
     setStage(1); 
    }); 

    //stage 2,3,5 etc... 

    $("#stage4").click(function() { 
     setStage(4); 
    }); 

}); 

Answer 2

。假定 '動畫' 是 '上' 級（好像是），嘗試使該重置一切的方法然後進行動畫特定元素：

function resetState() { 
    //you can use classes here to make it neater 
    $("#Seed1,#infoBox1,#Seed2,#infoBox2,#Seed3,#infoBox3,#Seed4,#infoBox4,#Seed5,#infoBox5").removeClass("animate"); 
} 

實施例使用：

$("#stage1").click(function() { 
    resetState(); 
    $("#Seed1,#infoBox1").toggleClass("animate"); 
});