javascript - How do I stop a function from running more than once when not needed to? -

so when click "about me" more once, jquery animation stops, knowing not suppose run again.

but when click "my portfolio", "web", "graphic" , "others" more once, #box1 div keeps move down , down. dont see @ first, once press "about me" again, you'll see happens.

how stop happening?

here's 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;     }); }); 

you can use stop, stop previous animations.

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

stop currently-running animation on matched elements.

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

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