javascript - 如何在动画继续播放之前停止动画？

Question

我正在尝试等待此动画完成，然后再开始下一个动画。我已经搜索过，但似乎没有答案能满足我的特定需求。我需要第一个 div 向上滑动，然后在完成后下一个 div 可以向下滑动。这是我的网站：http ://www.francodavarre.com/

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

当您单击块时，我希望隐藏的 div 下降，一旦您单击另一个块，div 就会出现。停止。然后与您单击的另一个块对应的 div 下降。

Answer 1

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.