​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
        letterSpacing: "+=0.3em"
11
      }, 1000 );  
12
    });
13
  });
14
</script>
15
​
16
<button>Run Animation!</button>
17
​
18
<div id="animation">Animation</div>
19
​
20
<p>When we use relative values (e.g. <code>+=1.5em</code>) the animation effect will happen every time we run it. This wouldn't happen if we used absolute values (e.g. <code>1.5em</code>), as the absolute value would already have been achieved with the first iteration.</p>