1

目前，我在按钮单击时触发了 CSS3 动画，并且一切正常。它是一个代表植物生命周期的动画，分 5 个阶段工作，每个阶段显示一个图像和相应的文本。

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

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>

（总共有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;
}
4

2 回答 2

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");   
});
于 2013-04-07T15:18:13.730 回答
1

假设 '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);  
    }); 

});
于 2013-04-07T16:59:08.390 回答