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>

Mohamed-Yousef · Accepted Answer · 2015-12-15T04:34:17.560

0

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

edited Dec 15 '15 at 04:34

answered Dec 15 '15 at 04:26

Mohamed-Yousef

23,946
3
19
28

thanks a lot for your help!! but what is wrong with mine?? – Luke Dec 15 '15 at 04:52
@Luke sorry for my bad explanation ..but with your code this is about the [deference between .on('click') and .click()](http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click) you can use .on('click') and it will work as well.... http://jsfiddle.net/mohamedyousef1980/9rafboyh/1/ – Mohamed-Yousef Dec 15 '15 at 05:12

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

1 Answers1