Question

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 question is clear, thank you.

Answer 1

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.