JQuery zeigen und verstecken div

Question

Ich habe 3 div als

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

Auf Knopfdruck folgt ich auf die div in der folgenden Art und Weise

Schritt 1 angezeigt werden soll: Ausblenden der div1
Schritt 2: Show spinnerdiv für wenige Millisekunden sagen 3000
Schritt 3: Hide spinnerdiv und zeigen div2

Ich habe die follwoing Methode versucht, aber seine Arbeit nicht richtig:

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

Answer 1

Versuchen Sie es mit setTimeout:

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

Answer 2

Versuchen Sie einen Rückruf statt hide() für den ersten Teil der Funktion, und da ich bin ein kein Fan von Verzögerungs ich ein setTimeout verwenden würde:

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

Answer 3

Haben Sie versucht setTimeout stattdessen verwenden?

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

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

} 

Answer 4

hier sind Sie

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