Basic jQuery fadeIn, fadeOut issue

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"

My CSS

.hide{ display:none}

My HTML

<div class="q">Box A</div>
<div class="q hide">Box B</div>
<div class="q hide">Box C</div>
<a href="#" id="btnNext">Next Box</a>
<div id="alert" class="hide">There is no Box left</div>

My JS script

$(function() {
    $("#btnNext").click( function() {
        $(this).parents('.q').fadeOut(500, function() {
              if( $('.q:last') ) {
                   $("#alert").fadeIn( 500 );
              } e开发者_开发问答lse {
                   $(this).next().fadeIn( 500 );
              }       
        });
    });
});

Use this code instead.

 $("#btnNext").click(function(){
     $('.q:visible').fadeOut(500, function(){
         if($(this).index()==$('.q').length-1){
                        $("#alert").fadeIn(500);
                    }else{  
                        $(this).next().fadeIn(500);
                    }                
                });

            });

You don't need to change anything in your HTML.

$(this).parents('.q') will not work; none of the .q divs are the parent of the a. Also, you need to ensure you only select the first .q. Additionally, once a div has faded out, it's still in the DOM, so you'll want to remove it from the DOM once you're done. Otherwise, the same one will fade out each time.

$(this).parent().find('.q')[0].fadeOut(500, function() {
    if ($(this).is(':last')) {
        $('#alert').fadeIn(500);
    } else {
        $(this).next().fadeIn(500);
    }
    $(this).remove();
});

Try this

$(function() {
 $("#btnNext").click(function(){
                $('.q').fadeOut(500, function(){
                    if($(this).index() == $('.q').length-1){
                        $("#alert").fadeIn(500);
                    }else{  
                        $(this).next().fadeIn(500);
                    }                
                });

            });
});