How to Not Accumulate Effects in Hide and Show

Question

Clicking the Fade button to div some and then clicking the Unfade button the div reappears. So far so good.

If you then click the Fade button again, the div disappears, appears and disappears again.

If you then click the Unfade button, the div appears, disappears and appears again.

If you then click fade again, the div disappears, appears, disappears, appears and disappears again.

So if you click alternately 10 times in Fade and Unfade you will see that the div goes back and forth 10 times. I wonder if there is a way to avoid this. If you click fade disappears and Unfade appears regardless of the number of times you have clicked alternately.

function functionHide() {
  $("div").hide(1000);
}
function functionShow() {
  $("div").show(1000);
}


$( "#id1" ).click(function() {
  $( "body" ).click(functionHide);
});

$( "#id2" ).click(function() {
  $( "body" ).click (functionShow);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button id="id1">Fade</button>
<button id="id2">UnFade</button>

<div>Click!</div>

Answer 1

The $("body"). click(...) in your code makes no sense, mainly being inside another click.

What your code was doing was, every time you clicked the button, you appended a new Vent Handler to the body element, which was going to run when the body was clicked. So each click the action was executed once more, as the Vent handlers were being added and the old ones were still there.

$(document).ready(function() {
  function functionHide() {
    $("div").hide(1000);
  }
  function functionShow() {
    $("div").show(1000);
  }


  $( "#id1" ).click(functionHide);

  $( "#id2" ).click(functionShow);
})

Answer 2

I’ve visualized your problem, friend.

function functionHide() {
    $("div").hide(1000);
}

function functionShow() {
    $("div").show(1000);
}

The statement of the above functions are ok. The problem is how you are doing to call them. From what I understand, you have a button that when you click, you hide something or displays, through the previously declared functions. Soon it would just be like this:

$("#id1").click(function() {
    functionHide();
});

$("#id2").click(function() {
    functionShow();
});

Your mistake was trying to complicate calling the functions using a $("body"). click() which has no purpose within its need.

function functionHide() {
  $("div").hide(1000);
}
function functionShow() {
  $("div").show(1000);
}

$("#id1").click(function() {
    functionHide();
});

$("#id2").click(function() {
    functionShow();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button id="id1">Fade</button>
<button id="id2">UnFade</button>

<div>Click!</div>