CODEWITHSUNDEEP
jquery
Ahmad Fouad
Ahmad Fouad

Reputation: 4107

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

Upvotes: 2

Views: 1968

Answers (3)

piggy_Yu
piggy_Yu

Reputation: 193

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); });

Upvotes: 0

Raynos
Raynos

Reputation: 169531

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.

Upvotes: 3

William Niu
William Niu

Reputation: 15853

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);
});

Upvotes: 0

Related Questions