在按钮点击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"); 
});