javascript - 如何在不需要时停止函数多次运行？

Question

所以基本上当我不止一次点击“关于我”时，jquery 动画停止，知道它不应该再次运行。

但是当我多次单击“我的投资组合”、“Web”、“图形”和“其他”时，#box1 div 一直向下移动。一开始您看不到它，但是一旦您再次按下“关于我”，您就会看到发生了什么。

如何阻止这种情况发生？

这是一个 JSFiddle 链接 https://jsfiddle.net/yg4717a8/1/

提前谢谢大家:)

$(document).ready(function () {
    var hasSlid = false;
    $('a#hide').click(function () {
        $('#box1').animate({
                'top': '+=155px',
                easing: 'easeInOutCubic',
                opacity: 0
            }, 500,
            function () {
                $('#box1').hide();
            });


        $('#container').show();
        hasSlid = false;
    });
});

Answer 1

您可以使用stop 来停止之前的动画。

$('#box1').stop(true, true).animate({

Stop the currently-running animation on the matched elements.

文档:http://api.jquery.com/stop/

演示:https://jsfiddle.net/tusharj/yg4717a8/2/