CODEWITHSUNDEEP
javascripthtmlcss
WibblyWobbly
WibblyWobbly

Reputation: 145

Hide a div following css animation on button click

As the current time, I have CSS3 Animations being triggered on button click, and all works well. Its an animation to represent the plant life cycle, working in 5 stages, each stage shows an image and corresponding text.

However, if i click stage 1, then stage 2, and want to click stage 1 again to view the supporting text again, whilst hiding the image from stage two, I cannot seem to be able to do it.

JSFiddle for your convinience:

http://jsfiddle.net/YUC3d/

Live View of current stage:

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 Segment being animated:

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

(There are 5 of these div combinations in total

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

Upvotes: 1

Views: 2008

Answers (2)

Nick Cardoso
Nick Cardoso

Reputation: 21753

Presuming that 'animate' is the 'on' class (it seems to be), try making a method that resets everything then animate the specific element:

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

}

Example use:

$(document).ready(function() {

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

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

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

});

Upvotes: 1

Nick Cardoso
Nick Cardoso

Reputation: 21753

Presuming that 'animate' is the 'on' class (it seems to be), try making a method that resets everything then animate the specific element:

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

Example use:

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

Upvotes: 1

Related Questions