Chaining css animations on multiple elements

Question

I am building a site that uses multiple css animations that "chain" following a single button press and I'm having trouble with the required jQuery (I'm not very experienced with it).

The following is a simple site that I've built to get the code right- it consist of two identical balls - one fades out and the other moves left to right.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <link href="css/move.css" rel="stylesheet" type="text/css">
        <script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    </head>

    <body>
        <section class="container">
            <figure id="ball"></figure>
            <figure id="ball2" </figure>
        </section>
        <section class="controls">
            <button class="button" id="button">Forwards</button>
        </section>
        <script type="text/javascript">
            $(function() {
                $("#forwards").click(function() {
                    $('#ball').fadeOut(function() {
                        $('#ball2').moving();
                    });
                });
            }); //end ready
        </script>
    </body>
</html>

I've also tried the following code

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#button").click(function() {
            jQuery("#stone").addClass("reveal");
            jQuery("#controls").addClass("fade_button");
        });
    });
</script>

@charset "utf-8";
/* CSS Document */

#ball {
    height: 200px;
    width: 200px;
    border-top: 2px solid red;
    border-right: 2px solid green;
    border-bottom: 2px solid yellow;
    border-left: 2px solid blue;
    border-radius: 100%;
    opacity: 1; 
    margin: 200px 200px; 
}
#ball2 {
    height: 200px;
    width: 200px;
    border-top: 2px solid red;
    border-right: 2px solid green;
    border-bottom: 2px solid yellow;
    border-left: 2px solid blue;
    border-radius: 100%;
    opacity: 1; 
}        
.controls {
    top: 10px;
    position: fixed; 
}   

.moving {
    animation: moving 6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}   

@keyframes moving {
    from { transform: translateX(0px) rotate(0deg); }
    to   { transform: translateX(1000px) rotate(360deg); }
}

.fadeOut {
    animation: fadeOut 4s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}

@keyframes fadeOut {
    from { opacity: 1; } 
    to   { opacity: 0; }
}

But I can't get it to work. Any help would be appreciated.

(The "proper" page will have quite a complex set of animations so the addClass/removeClass method might be better.

Many thanks

This might help: http://stackoverflow.com/q/18689031/2407212 — Jonathan, Nov 11 '14 at 16:55
Check IDs you are using, your selectors don't make sense here `"#forwards"` `"#stone"` `"#controls"` — A. Wolff, Nov 11 '14 at 16:57
Your `#ball2` element has a syntax error. Also the `meta` tag needs to be closed. — Rory McCrossan, Nov 11 '14 at 16:58

score 0 · Accepted Answer · answered Nov 11 '14 at 17:00

Your "Forwards" button id was incorrect. You had it as #forwards, but it is actually #button.

I'm not sure what the $('#ball2').moving() is supposed to do, though. You didn't include that snippet.

Using your first example:

$(function() {
$("#button").click(function(){
    $('#ball').fadeOut(function(){
        $('#ball2').moving();
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/move.css" rel="stylesheet" type="text/css">
</head>

<body>

<section class="container">
    <figure id="ball">ball text</figure>
    <figure id="ball2">ball2 text</figure>
   </section>

<section class="controls">
        <button class="button" id="button">Forwards</button>
    </section>
</body>   
</html>

Sorry, the relates to the css and has ball2 moving left to right accross the page. I'll try and get back to this on Thursday. — Philip Terry, Nov 11 '14 at 18:33
Many thanks to all who contributed to this. I have corrected the html . The original js script still did not work so I corrected my alternative as follows — Philip Terry, Nov 13 '14 at 16:17

Chaining css animations on multiple elements

1 Answers1