Hide a div following css animation on button click

Question

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

Nick Cardoso · Accepted Answer · 2013-04-09 17:16:41Z

1

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

});

edited Apr 9, 2013 at 17:16

answered Apr 7, 2013 at 16:59

Nick Cardoso

21.9k14 gold badges83 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

WibblyWobbly Over a year ago

Have altered the resetState as suggested, however it still only shows 1 image at a time, instead of a progressive style. (Live link in original question is an example of whats happening)

Nick Cardoso Over a year ago

Ok, so I think I get what you want now - text bx should be whichever was clicked last and images should show all stages (seeds) up to the last stage we clicked. Is that irght?

WibblyWobbly Over a year ago

Say stage 1 is clicked : Shows text for stage 1 and image. Stage 2 clicked: Shows text for stage 2 and image for stage 1 AND 2 and so on for all stages. However, i'd still like to be able to click any button to view in any order, whilst the previous seed images are kept

Nick Cardoso Over a year ago

Yeah, that's what I've meant. I've edited the answer, it should do what you want

WibblyWobbly Over a year ago

Does this edited answer replace all the JS i previously have?

|

Nick Cardoso · Accepted Answer · 2013-04-07 15:18:13Z

1

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

answered Apr 7, 2013 at 15:18

Nick Cardoso

21.9k14 gold badges83 silver badges135 bronze badges

2 Comments

WibblyWobbly Over a year ago

Whilst this nearly does as I would like, is there any way to modify the example given so that the image stays (#Seed1) whilst #infoBox1,2,3,4,5 change?

Nick Cardoso Over a year ago

You could send in the id of the image you don't want to reset, I'll add it in a separate answer

Collectives™ on Stack Overflow

Hide a div following css animation on button click

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related