文本圖像淡出和淡入問題：文本淡入淡出和以連續的方式

Question

功能：

文字圖像是假設當用戶點擊圖像以模擬淡出&淡入效果。因此，當用戶點擊圖像時，它將作爲一個動作淡出和淡入，而當用戶沒有點擊圖像時，它將不具有淡入淡出和淡入淡出效果。因此，當用戶點擊兩次圖像時，文本圖像和淡出和淡入，然後重複淡出和淡入效果。

我做了什麼：

我已經設置了以下效果，下面的代碼：

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

問題：

在一點上， image 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); 
     }); 
}); 

，如果你需要淡出和淡入之間的延遲，你可以使用setTimeOut（）

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

此代碼將隱藏TapText並在3秒後顯示