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

【问题标题】：How do I stop an animation before it continues another?如何在动画继续播放之前停止动画？
【发布时间】：2013-04-29 00:49:27
【问题描述】：

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

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

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

【问题讨论】：

你不想停止第一个动画，你想等待让它完成吗？

标签： javascript jquery animation

【解决方案1】：

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

1：在“完成”回调中指定第二个动画：

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

Demo

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

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

Demo

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

【讨论】：