Basic jQuery fadeIn, fadeOut problem?
<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>
