How to Not Accumulate Effects in Hide and Show

Asked

Viewed 140 times

0

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>

  • It’s a little hard to figure out what you really need. You’ve tried adding an event monitor ?

2 answers

0


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);
})
  • I think my explanation is clear, do what is said by running the code you will notice what happens. If you click fade the div goes away. Click Unfade it appears. Click Fade the div some, appears and disappears. That’s what I want to block. With respect to your code I couldn’t make it work.

  • If NEM worked is because, in your HTML, you are added the script before you have adding the buttons, then at the time it runs you will not find the buttons, as they do not exist yet. Either you include javascript after the elements, or you enclose all the javascript code within a $(Document). ready(). I will update the answer with this second option, to be clearer. Do what is said that you will realize that it works.

  • Thanks, that’s right! I forgot that detail.

0

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>

  • Okay, it worked great. Because the script has to stay after the buttons to make it work?

  • Not necessarily. The order that must be respected is the inclusion of the Jquery script and then its programming commands.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.