CODEWITHSUNDEEP
jquery
Pramerios
Pramerios

Reputation: 1

In jQuery, how do I execute a function sequentially rather than simultaneously?

I'd like to be able to show and hide an element using jQuery's slideToggle function. When the element begins to start sliding out onto the screen, the 'border' class is toggled, so the element has a border as it slides in. However, when the element begins to slide out (when you click the button again), the border disappears as the slideToggle begins, not ends. So basically, I want the border to stay with the element as it slides out, and THEN disappear.

Here is the code cropped to my issue: 

$('.button').on('click', function() {
    $('.sub').slideToggle();
    $('.sub').next().slideToggle();
    $('.divclass').toggleClass('border');
});

Upvotes: 0

Views: 50

Answers (1)

Adrian
Adrian

Reputation: 8597

Use a callback function like so

$('.sub').slideToggle( "slow", function() {
    $('.divclass').toggleClass('border');
  });

A callback will execute any code you put after the animation completes.

Upvotes: 1

Related Questions