Jquery шоу и скрыть DIV

Question

У меня есть 3 DIV следующим

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

На кнопке мыши я хочу, чтобы показать DIV следующим образом

Шаг 1: Скрыть div1
Шаг 2: Показать spinnerdiv за несколько миллисекунд говорят 3000
Шаг 3: Скрыть spinnerdiv и показать div2

Я попытался происходит некорректно метод, но он не работает должным образом:

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

Answer 1

Попробуйте его с setTimeout:

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

Answer 2

Попробуйте использовать функцию обратного вызова, а не скрывать() для первой части функции, и с тех пор Я не поклонник задержки я хотел бы использовать SetTimeout:

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

Answer 3

вы пробовали использовать setTimeout вместо этого?

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

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

} 

Answer 4

здесь вы

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()' >