javascript - How do I stop a function running again when I dont want it to? (jquery) -

lots of things not right in js code. when click "show" more once, #box-1 keeps moving further , further down. same thing's happening #box-2 when clock "hide" more once. how stop happening?

i'd add, how make boxes "fade" when shows , hides? can seem make work when it's showing. don't want use toggle button, want use 2 buttons because i'm experimenting on something.

here's jsfiddle link

thank time :)

$(document).ready(function(){ $('a#hide').click(function(){     $('#box1').hide().animate({'top': '-=155px', opacity: 0}, 500);     $('#box2').show().animate({'top': '+=155px', opacity: 1}, 500);  })  $('a#show').click(function(){     $('#box1').show().animate({'top': '+=155px', opacity: 1}, 500);            $('#box2').hide().animate({'top': '-=155px', opacity: 0}, 500); }) }); 

edit:

i got code working way wanted guys! answers isnt looking for, of answers, got working. thank of answering , helping me out :) appreciate it.

here's updated jsfiddle link https://jsfiddle.net/vr1u0wzu/83/

thank once again people. cheers!

you try:

function hideit() {   $('#box1').hide().animate({'top': '-=155px', opacity: 0}, 500);   $('#box2').show().animate({'top': '+=155px', opacity: 1}, 500);    $('a#show').one('click', showit); } function showit() {   $('#box1').show().animate({'top': '+=155px', opacity: 1}, 500);          $('#box2').hide().animate({'top': '-=155px', opacity: 0}, 500);   $('a#hide').one('click', hideit); }  $(document).ready(function(){   $('a#hide').one('click', hideit); });