Text Image fadeOut and fadeIn Issue: Text fadeIn and fadeOut in continuous manner

Question

functionality:

The Text Image is suppose to simulate a fadeOut & fadeIn effect when the user clicks on the Image. Hence, when user clicks on the image, it will fadeOut and fadeIn as one motion, and when the user doesn't click on the image, it wouldn't have the fadeOut and fadeIn effect. Hence, when user clicks on the image twice, the text image and fadeOut and fadeIn and then repeat the fadeOut and fadeIn effect.

What I have done:

I have set the following effect to the following code:

$("#TapText").click(function(){
        $("#TapText").fadeOut();
});
$("#TapText").click(function(){
        $("#TapText").fadeIn();
});

Issue:

At the point, the image fadeIn and fadeOut, however, the number of fadeIn is not consistent to each click, therefore, at each click, the image will fadeOut and then fadeIn in increment.

What is done wrong and how am I able to rectify?

Thanks

 //Notification Countdown function GameStartTimer() { if (count > 0) { $("#CountdownFadeInTimer").fadeOut('slow', function() { // $("#CountdownFadeInTimer").text(count); $("#GameCounter").attr("src", "lib/image/fadeInCount/" + count + ".png") $("#CountdownFadeInTimer").fadeIn(); count--; console.log(count); }); } else if (count == 0) { $("#CountdownFadeInTimer").fadeOut('slow', function() { // $("#CountdownFadeInTimer").text("Start!!"); console.log("start"); $("#GameCounter").attr("src", "lib/image/Start.png") $("#CountdownFadeInTimer").fadeIn(); count--; //method call to Game function & Timer initiateGameTimer(); //Remove the "disabled" attribute to allow user to tap on the image button when notification countdown is done document.getElementById("TapText").removeAttribute("disabled"); }); } else { //fade out countdown text $("#CountdownFadeInTimer").fadeOut(); clearInterval(interval); } } //Trigger to set GameStartTimer function: fade in notification counter interval = setInterval(function() { GameStartTimer() }, 2000); // Tap the star down function function GameStart() { console.log("GameStart"); x = document.getElementById('GameStar').offsetTop; //check condition if star reach bottom page limit, else continue to move down if (x < bottomStarLimit) { console.log("x:" + x); x = x + step; $("#TapText").click(function() { $("#TapText").fadeOut(); }); $("#TapText").click(function() { $("#TapText").fadeIn(); }); } document.getElementById('GameStar').style.top = x + "px"; } 

 <div id="GamePage" style="width:1920px; height:3840px; z-index=1;"> <input id="TapText" type="image" src="lib/toysrus/image/finger.png" onclick="GameStart()" disabled="disabled" /> </div> 

Answer 1

The next code will make TapText the TapText will fadeOut and will fadeIn again

$("#TapText").click(function(){
        vat ThisIt = $(this);
        ThisIt.fadeOut(2000 , function(){
             ThisIt.fadeIn(2000);
        });
});

if you need delay between fadeOut and fadeIn you can use setTimeOut()

$("#TapText").click(function(){
     vat ThisIt = $(this);
     ThisIt.fadeOut(2000 , function(){
         setTimeout(function(){  
             ThisIt.fadeIn(2000);
         } , 3000);
     });
 });

this code will hide TapText and show it after 3 seconds