How to set proper Timer per container, with a global loop?

37
February 25, 2018, at 12:36 PM

sorry if this posted in the wrong place, I'm not sure if what I'm trying to do is associated with HTML or CSS, so if anyone has any insight for a newbie like me, it would be much appreciated!

As the title says, I wondering what would be the correct way to setup timers on my containers (and basically control them) to start and end the container WITH the animation? No matter what I try, it seems like the timers are not working, and the ones that work, I cannot wrap my head around them on why they would be 'adding' or 'multiplying' with the other timers?

Basically, I want my Image to slide in from the left, at the same time as my Head and Main container with the text, once at resting position, a third Misc container drops down. Once done, after x seconds, basically everything folds backwards (as they came out) and slides out from the screen.

Basically, I'm trying to make a small side screen popup with a drop down remainder, the kind of stuff you see in videos sometimes.

Now here is the problem, I want to manage the timers on all of these, problem is as noted, I cannot for the life of me figure out how to manage the timers, or how to write the code for them, or what to do. I want both my main container and header container to come out at the same time, and when done, to wait for the 3rd container to be done and then slide out from the screen together.

Here is an image that might explain better on what I would like to do, but what my current code is doing: Imgur https://imgur.com/yl9VU3p

Here's the code I'm talking about:

<html>
    <head>
        <title>Final Panels</title>
        <link rel="stylesheet" type="text/css" href="css\css.css">
        <link rel="stylesheet" type="text/css" href="css\animate.css">
        <script src="js\jquery-2.1.3.min.js"></script>      
    </head>
    <body>
        <div id="Logo">
            <img id="LogoImage" src="images\Challenge_Clock.png">
        </div>
        <div id="ChallengeRunHeader">
        Torch Challenge Run
        </div>
        <div id="ChallengeRunMain">
        Carry a Torch and never let it run out.
        </div>
        <div id="ChallengeRunMisc">
        Only relight 11 times.<br>
        Only 6 Sanctuaries.<br>
        Only Divine setup.<br>
        </div>
    </body>
<script>
$(document).ready(function() {
    // Do something here to start the animations
    // You could add a randomiser to play random animation at random interval
    // or whatever, your imagination is your only limit at this point.
    AnimateRun();
});
function AnimateRun() {
    $('#Logo').show();
    $('#Logo').addClass('animated fadeInLeft');
    $('#Logo').one('webkitAnimationEnd', function() {
        $('#ChallengeRunHeader').show();
        $('#ChallengeRunHeader').addClass('animated fadeInLeft');
        $('#ChallengeRunMain').show();
        $('#ChallengeRunMain').addClass('animated fadeInLeft');
        $('#ChallengeRunMain').one('webkitAnimationEnd', function() {
            $('#ChallengeRunMisc').show();
            $('#ChallengeRunMisc').addClass('animated fadeInDown');
                setTimeout(function() {  
                    $('#ChallengeRunMisc').removeClass('fadeInDown');
                    $('#ChallengeRunMisc').addClass('fadeOutUp');
                    setTimeout(function() {  
                        $('#ChallengeRunHeader').removeClass('fadeInLeft');
                        $('#ChallengeRunMain').removeClass('fadeInLeft');
                        $('#ChallengeRunMain').addClass('fadeOutLeft');
                            setTimeout(function() {
                                $('#Logo').addClass('fadeOutLeft');
                                $('#Logo').removeClass('fadeInLeft');
                                $('#ChallengeRunHeader').addClass('fadeOutLeft');
                                setTimeout(function() { location.reload(); 
                                }, 6000);
                            }, 3000);
                    }, 3000);
                }, 6000);
        });
    });
}
</script>
</html>

Cheers in advance!

READ ALSO
Add class to previous element

Add class to previous element

I just want to add class for the button after another class but it's inside of another divTake a look at this example

72
How to inject an iframe through a chrome extension without breaking client website layout

How to inject an iframe through a chrome extension without breaking client website layout

it's been weeks now and I decided to finally come forward and ask my questionI have researched many similar subjects but I can't seem to find the answer that solves my problem

56
Using jQuery to replace tags within an array?

Using jQuery to replace tags within an array?

I am new to Javascript and JQuery and I am trying to replace all my tags with upon first click, and then replace with on the second click, and so forth

83
Dynamic search form using javascript for Django project

Dynamic search form using javascript for Django project

I am trying to create a search form using jquery for Django using following tasks to do:

65