javascript - 文本图像淡出和淡入问题: Text fadeIn and fadeOut in continuous manner

Question

功能:

当用户单击图像时，文本图像应该模拟淡出和淡入效果。因此，当用户单击图像时，它将淡出和淡入作为一个 Action ，而当用户不单击图像时，它将不会有淡出和淡入效果。因此，当用户单击图像两次时，文本图像会淡出和淡入，然后重复淡出和淡入效果。

我做了什么:

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

$("#TapText").click(function(){
        $("#TapText").fadeOut();
});
$("#TapText").click(function(){
        $("#TapText").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 秒后显示