如何延迟显示元素，直到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); });