如何在动画继续另一个动画之前停止该动画？

Question

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

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

当你点击这些块时，我希望隐藏的div下来，一旦你点击另一个块，div就会出现。停止。然后，与您单击的另一个块相对应的div就会显示出来。

Answer 1

有两种基本的方法可以做你想做的事情：

1:在complete回调中指定第二个动画：

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

2:在“完成”处理程序中指定第二个动画，该处理程序链接到由第一个动画生成的承诺：

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

在这两种情况下，你都会看到在外部函数中有一个内部函数，如果你以前没有遇到过这样的函数，这会让你感到困惑。这是你在javascript中必须习惯的东西，在javascript中，函数是一级对象，可以像其他变量一样定义和传递。