文本图像淡出和淡入问题：文本淡入和淡出连续进行

Question

功能：

文本图像假设在用户单击图像时模拟淡出和淡入效果。因此，当用户点击图片时，它会将淡出和淡入作为一个动作，而当用户不点击图片时，它不会产生淡出和淡入效果。因此，当用户点击图像两次时，文本图像和淡出和淡入然后重复淡出和淡入效果。

我做了什么：

我在下面的代码中设置了如下效果：

$("#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").click(function(){
        vat ThisIt = $(this);
        ThisIt.fadeOut(2000 , function(){
             ThisIt.fadeIn(2000);
        });
});

如果你需要淡出和淡入之间的延迟，你可以使用 setTimeOut()

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

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

文本图像淡出和淡入问题：文本淡入和淡出连续进行

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

javascript

jquery

click

fadeout

fadein