文本图像fadeOut和fadeIn问题：文本fadeIn和fadeOut以连续方式

Question

功能：

当用户点击图像时，文本图像应该模拟淡出和淡入效果。因此，当用户点击图片时，它会fadeOut和fadeIn作为一个动作，当用户不点击图片时，它不会有fadeOut和fadeIn效果。因此，当用户单击图像两次时，文本图像和fadeOut 和fadeIn 然后重复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>

Answer 1

接下来的代码将使 TapText 成为 TapText 将淡出并再次淡入

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

如果您需要在 fadeOut 和 fadeIn 之间进行延迟，您可以使用 setTimeOut()

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

此代码将隐藏 TapText 并在 3 秒后显示它