title: Trigger jQuery events one after another
body: <p>Hi I am trying to create an animation where one class is added only after the one before it is finished triggered.</p>
  
  <pre><code>$('.flipper').click(function(){
    $('#first').addClass('first-flip');
    $('#second').addClass('second-flip');
    $('#fourth').addClass('fourth-flip');
  });
  </code></pre>
  
  <p>so    </p>
  
  <pre><code>$('#second').addClass('second-flip');
  </code></pre>
  
  <p>would only trigger when </p>
  
  <pre><code>$('#first').addClass('first-flip');
  </code></pre>
  
  <p>has finished its process.</p>
  
  <p>so another way of explaining this would be.</p>
  
  <p>Block A has a rotate effect added to it, after Block A is rotated, only then will Block B move 20 px right.</p>
  
  <p>I basically just want to know how to create Jquery effects that trigger in sequential order. </p>