How to delay showing elements until slideToggle is completed?

This is my code.

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

Now how can I make the .loading and .hm_sm_btn show() get done after the previous action slideToggle is completed. right now, the items get instantly shown so I am looking for some simple and easy way to make a short delay and make them appear after slideToggle() is completed.

Hope my quest开发者_运维百科ion is clear, thank you.

---

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

Use the callback.

The .slideToggle documentation clearly shows you can pass in a callback to do further computation when the slideToggle action finishes.

You should spend more time reading the documentation. It's good.

---

You may add a callback function for the slideToggle function (see 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);
});

---

maybe you can try the callback way.

$(".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); });