使用JQuery消除單個字符

-1

用戶可以在帶提示的彈出框中鍵入單詞，然後字符串的字母必須逐一出現和消失。使用JQuery消除單個字符

但現在只有字符串的最後一個字符會出現並消失。

var newHeadingText = prompt("Please provide a new heading:");   
for (var i = 0; i < newHeadingText.length; i++) {      
    $("#main-heading").text(newHeadingText[i]).fadeOut(3000).fadeIn(3000);     
}

謝謝

來源

2017-08-31 LikeToDo

'.text（）'會將元素的文本設置爲您指定的值。沒有任何排隊或超時的情況下，最後一次迭代將是唯一一個你看到的，因爲你實際上在幾毫秒的時間內將文本更新爲每個字母。 – Santi

例如，您鍵入：hallo。那麼它必須是：h .. a..l..l..o - 所以在三秒鐘之後h然後在三秒鐘之後a然後在三秒鐘之後l ..等等 – LikeToDo

你目前的復位.text()每個迴路，這恰好近乎瞬間的價值。

相反，我會建議使用setTimeout創建一個排序隊列，其中第一個字母立即淡出，第二個字母在超時6秒後淡入，12秒超時後的第三個字母等。

其他改變我做：

新增.hide()到回到開始的標題爲
反.fadeIn()和使最後一個字母就不會淡出「隱藏」，那麼，然後再出來
將計時器設置爲fadeTime * 2 * i（我們需要將其乘以2以補償和中的淡入淡出。我們通過i乘以所以第一個從0開始，在6000ms的第二，第三個爲1200ms等）

最終產品看起來是這樣的：

var fadeTime = 3000; //ms for fade-in, fade-out 
 

 
var newHeadingText = prompt("Please provide a new heading:"); 
 
for (var i = 0; i < newHeadingText.length; i++) { 
 
    fadeLetter(i); //call our function with the current iteration 
 
} 
 

 
function fadeLetter(i) { 
 
    setTimeout(  //Use setTimeout to queue fade animations 
 
    function() { 
 
     $("#main-heading").text(newHeadingText[i]).hide().fadeIn(fadeTime).fadeOut(fadeTime); 
 
    }, fadeTime * 2 * i); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="main-heading"> 
 

 
</h1>

來源

2017-08-31 21:14:18 Santi

使用JQuery消除單個字符

回答

相關問題