CODEWITHSUNDEEP
javascriptjqueryanimation
user2330406
user2330406

Reputation: 3

How do I stop an animation before it continues another?

I am attempting to wait for this animation to finish before it begins the next animation. I have searched but no answer seems to meet my specific needs. I need this first div to slide up, then after it is finished the next div can slide down. this is my website: http://www.francodavarre.com/

    $('.contact_block').click(function() {
         $('.hide_me').slideUp(400);
         $('.contact_me').slideDown(400);
    });

when you click on the blocks I want the hidden div to come down and once you click on another block the div comes up. stops. and then the div corresponding to the other block you clicked comes down.

Upvotes: 0

Views: 56

Answers (1)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

There's two basic ways to do what you want :

1: Specify the second animation in a "complete" callback :

$('.contact_block').click(function() {
    $('.hide_me').slideUp(400, function() {
        $('.contact_me').slideDown(400);
    });
});

Demo

2: Specify the second animation in a "done" handler chained to a promise generated by the the first animation :

$('.contact_block').click(function() {
    $('.hide_me').slideUp(400).promise().done(function() {
        $('.contact_me').slideDown(400);
    });
});

Demo

In both cases you will see there's an inner function within an outer function, which will be confusing if you've not previously encountered such. This is something you have to get used to in javascript, where functions are first-class objects that can be defined and passed around like other variables.

Upvotes: 1

Related Questions