在不需要时，如何停止功能多次运行？

Question

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

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.

How do I stop this from happening?

Here's a JSFiddle link 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;
    });
});

Answer 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/