title: jQuery onClick slideUp & addClass not working
body: <p>I am trying to transition between sections.<br/>
  1. Slide current section up and apply class "completed".<br/>
  2. Then slide next section up from bottom apply the class "active"<br/></p>
  
  <p>I am also wondering how to slide the section and then<br/>
  remove the class because its all happening at the same time<br/>
  which cause it to disappear before it slides up.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="active"&gt;
      &lt;h1&gt;Hi, how are you?&lt;/h1&gt;
      &lt;p&gt;This is paragraph text!&lt;/p&gt;
      &lt;button class="btn"&gt;Next&lt;/button&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
      &lt;h1&gt;Section number two.&lt;/h1&gt;
      &lt;p&gt;This is paragraph text!&lt;/p&gt;
      &lt;button class="btn"&gt;Next&lt;/button&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
      &lt;h1&gt;Section number three.&lt;/h1&gt;
      &lt;p&gt;This is paragraph text!&lt;/p&gt;
      &lt;button class="btn"&gt;Next&lt;/button&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>section {
      display: none;
      width: 400px;
      background: rgba(000,000,000,.3);
      border-radius: 5px;
      text-align: center;
      padding: 5px 0;
      font-family: helvetica, sans-serif;   
  }
  
  .active {
      display: block;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('button').click(function () {
      $('.active').slideUp('fast').removeClass('active').addClass('completed');
      $(this).next("section").slideUp().addClass('active');
  });
  </code></pre>