title: Basic jQuery fadeIn, fadeOut issue
body: <p>Below are my code, When I click Next Box it show the Box B second box and hide Box A and so on then if Box C is loaded the last box it will show alert that "There is no Box left"</p>
  
  <p><strong>My CSS</strong></p>
  
  <pre><code>.hide{ display:none}
  </code></pre>
  
  <p><strong>My HTML</strong></p>
  
  <pre><code>&lt;div class="q"&gt;Box A&lt;/div&gt;
  &lt;div class="q hide"&gt;Box B&lt;/div&gt;
  &lt;div class="q hide"&gt;Box C&lt;/div&gt;
  &lt;a href="#" id="btnNext"&gt;Next Box&lt;/a&gt;
  &lt;div id="alert" class="hide"&gt;There is no Box left&lt;/div&gt;
  </code></pre>
  
  <p><strong>My JS script</strong></p>
  
  <pre><code>$(function() {
      $("#btnNext").click( function() {
          $(this).parents('.q').fadeOut(500, function() {
                if( $('.q:last') ) {
                     $("#alert").fadeIn( 500 );
                } else {
                     $(this).next().fadeIn( 500 );
                }       
          });
      });
  });
  </code></pre>