如何在不需要时阻止某个函数运行多次？

So basically when I click "About Me" more than once, the jquery animation stops, knowing that its not suppose to run again.

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

But when I click "My Portfolio", "Web", "Graphic" and "Others" more than once, the #box1 div just keeps move down and down. You dont see it at first, but once you press "About Me" again, you'll see what happens.

但是当我不止一次点击“我的投资组合”,“网络”,“图形”和“其他”时,#box1 div就会一直向下和向下移动。你一开始没看到它,但是一旦再次按下“关于我”,你就会看到会发生什么。

How do I stop this from happening?

我如何阻止这种情况发生?

Here's a JSFiddle link https://jsfiddle.net/yg4717a8/1/

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

Thanks in advance guys :)

先谢谢你们:)

$(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;
    });
});

1 个解决方案

#1

You can use stop, to stop previous animations.

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

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

Stop the currently-running animation on the matched elements.

停止匹配元素上当前运行的动画。

Docs: http://api.jquery.com/stop/

Demo: https://jsfiddle.net/tusharj/yg4717a8/2/

#1