如何延遲顯示元素，直到slideToggle完成？

Question

這是我的代碼。

$(".big").click(function() { 
    var widget = $(this).parent(); 
    widget.children('.layer-dark').slideToggle(300).fadeTo(1, 0.97); 
    widget.children('.loading, .hm_sm_btn').show(); 
}); 

現在，我怎麼讓.loading和.hm_sm_btn show()獲得前一個動作slideToggle完成後進行。現在，這些物品會立即顯示出來，因此我正在尋找一些簡單而簡單的方法來縮短延遲時間，並在slideToggle()完成後顯示。

希望我的問題很明確，謝謝。

Answer 1

widget.children('.layer-dark').slideToggle(300, function() { 
    widget.children('.loading, .hm_sm_btn').show(); 
}).fadeTo(1, 0.97); 

了回調。

.slideToggle文檔清楚地顯示，當slideToggle動作完成時，您可以傳入回調來執行進一步的計算。

您應該花更多時間閱讀文檔。這很好。

Answer 2

您可以添加一個回調函數的slideToggle功能（參見documentation）：

$(".big").click(function() { 
    var widget = $(this).parent(); 
    widget.children('.layer-dark') 
      .slideToggle(300, function() { widget.children('.loading, .hm_sm_btn').show() }) 
      .fadeTo(1, 0.97); 
}); 

Answer 3

也許你可以嘗試回調的方式。

$(".big").click(function() { var widget = $(this).parent(); widget.children('.layer-dark').slideToggle(300, function(){ widget.children('.loading, .hm_sm_btn').show(); }).fadeTo(1, 0.97); });