Question

作为当前时间，我点击按钮时会触发CSS3动画，一切正常。它是一个代表植物生命周期的动画，分为5个阶段，每个阶段显示一个图像和相应的文本。

但是，如果我点击第1阶段，然后第2阶段，并想再次点击第1阶段再次查看支持文本，同时隐藏第2阶段的图像，我似乎无法做到。

JSFiddle为您提供便利：

现阶段的实时视图：

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>

（总共有5种div组合

CSS：

@-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

假设'animate'是'on'类（似乎是），尝试制作一个重置所有内容的方法，然后为特定元素设置动画：

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");   
});

Answer 2

假设'animate'是'on'类（似乎是），尝试制作一个重置所有内容的方法，然后为特定元素设置动画：

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);  
    }); 

});

在按钮单击时隐藏跟随css动画的div

2 个答案: