jQuery的顯示和隱藏DIV

我有3個DIV如下jQuery的顯示和隱藏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

我曾嘗試follwoing方法，但它不能正常工作：

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

來源

2016-09-06 ksg

你的代碼工作正常，檢查我的答案與片段 –

您是right.Just聽錯了，因爲從我身邊的一些錯誤。任何方式接受使用除上述以外的其他方法的答案 – ksg

與setTimeout試試：

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

來源

2016-09-06 12:41:45

嘗試使用一個回調，而不是隱藏（）的函數的第一部分，因爲我是一個沒有延遲的粉絲我會用的setTimeout：

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

來源

2016-09-06 12:42:45

您是否嘗試過使用setTimeout呢？

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

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

}

來源

2016-09-06 12:42:45 divix

你在這裏

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

來源

2016-09-06 12:43:10

請在動畫效果之後再次點擊按鈕。 – ksg

剛剛更新了divs的初始狀態 –

jQuery的顯示和隱藏DIV

回答

相關問題