function closecustomBox() {
$('#dialog').hide();
}
$('#dialog').hide();
$('#anotherdialog').hide();
$("#show").click(function() {
$('#dialog').show();
$.when(
setTimeout(function() {
closecustomBox();
}, 3000)
).done(function(x) {
$('#anotherdialog').show();
});
})
#dialog {
width: 101px;
height: 101px;
background-color: red;
}
#anotherdialog {
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>
<div id="anotherdialog"></div>
<div id="show">show</div>
What I want to happened is after clicking show will show the red box after 3 seconds the red box will hide then the blue box should show.
I want to achieve here is to not make the 2 div appear together