​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
5
<script>
6
  $( function() {
7
    $( "button" ).click( function() {
8
      $( "#animation" ).animate({
9
        fontSize: "+=1.5em"
10
      }, 500 );  
11
      $( "#animation" ).animate({
12
        letterSpacing: "+=0.3em"
13
      }, 1500 );  
14
    });
15
  });
16
</script>
17
<button>Run Animation!</button>
18
​
19
<div id="animation">Animation</div>
20
​
21
<p>Chained animations is where a single event triggers multiple animations, and they run in order (one after the other).</p>