Question

功能

文本图像假设模拟fadeOut＆amp;当用户单击图像时fadeIn效果。因此，当用户点击图像时，它将fadeOut和fadeIn作为一个动作，当用户没有点击图像时，它将没有fadeOut和fadeIn效果。因此，当用户点击图像两次时，文本图像和fadeOut和fadeIn然后重复fadeOut和fadeIn效果。

我做了什么：

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

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

问题：

此时，图像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将fadeOut并将再次淡入

$("#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秒后显示

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

1 个答案: