Question

I have this piece of jquery code. The idea is to when clicking on div1 show div2 and vise versa. I am doing slow loading of the divs. I am seeing something really weird. Before the animation to load the div happens and the user clicks twice both divs shows up on the page. Is there a a way in jquery to make sure page loads and then if clicked the div2 shows up. I want show one div at a time.

 $(function () {

                $('#div1').click(function () {
                    $('#div1').hide();                
                    $('#div2').show(3000);
                });
                $('#div2').click(function () {
                    $('#div2').hide();
                    $('#div1').each(function()
                    {
                        if($(this).html()!='')    
                        $(this).show(3000);
                    }); 
                });
             });

Answer 1

You could try clearing the animation queue before calling hide.

$(function () {
    $('#div1').click(function () {
        $('#div1').stop(true).hide();                
        $('#div2').show(3000);
    });
    $('#div2').click(function () {
        $('#div2').stop(true).hide();
        $('#div1').each(function()
        {
            if($(this).html()!='')    
            $(this).show(3000);
        }); 
    });
 });

http://api.jquery.com/stop/