ksg ksg - 3 months ago 18
jQuery Question

Jquery show and hide div

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

Try it with setTimeout:

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