文本图像淡入淡出和淡入淡出问题:以连续方式显示文本淡入淡出

功能：

假设文本图像模拟fadeOut&fadeIn效果当用户单击图像时。因此，当用户点击图像时，它会将音量输出和音量输入作为一个动作，而当用户不点击图像时则不会产生音量输出和声音输入的效果。因此，当用户点击图像两次时，文本图像和音量输出和音量输入，然后重复音量输出和声音输入效果。

我所做的：

我已将以下效果设置为以下代码：

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

问题：

在这一点上，图像fadeIn和fadeOut，但是，fadeIn的数量与每次单击不一致，因此，在每次单击时，图像将递增fadeOut和fadeIn。

哪里做错了，我该如何纠正？

感谢

//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>