Jquery show and hide div

Question

I have 3 div as follows

<div id="div1"></div>
<div id="spinnerDiv" style="display:none"></div>
<div id="div2" style="display:none"></div>

On a button click I want to show the div in the following way

Step 1: Hide the div1
Step 2: Show spinnerdiv for few milliseconds say 3000
Step 3: Hide spinnerdiv and show div2

I have tried the follwoing method but its not working properly:

button click function(){
    $("#div1").hide();
    $("#spinnerDiv").show().delay(3000).queue(function () {
        $(this).hide();
        $("#div2").show();
    });
}

Answer 1

here you are

function thisAction(){
     $("#div1").hide();
     $("#spinnerDiv").hide();
      $("#div2").hide();
     
     $("#spinnerDiv").show().delay(3000).queue(function () {
                $(this).hide();
                $("#div2").show();
            });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="div1">div 1</div>
 <div id="spinnerDiv" style="display:none"> spinnerDiv</div>
 <div id="div2" style="display:none">div2</div>

<button onclick='thisAction()' >

Answer 2

Try using a callback instead of hide() for the first part of the function, and since I am a not a fan of delay I would use a setTimeout:

$("button").click(function(){
    $("#div1").fadeOut(1, function () {
        var s = $("#spinnerDiv");
        s.show();
        setTimeout(function () {
            s.hide();
            $("#div2").show();
        }, 3000);
    });
}

Answer 3

Have you tried using setTimeout instead?

button click function(){
     $("#div1").hide();
     $("#spinnerDiv").show();

     setTimeout(function () {
        $('#spinnerDiv').hide();
        $("#div2").show();
     }, 3000);

}

Answer 4

Try it with setTimeout:

$("#div1").hide();
$("#spinnerDiv").show();
setTimeout(function() {
    $("#spinnerDiv").hide();
    $("#div2").show();
}, 3000);