jQuery佔位符動畫

Question

我有一個HTML表單，當前有一個空的佔位符值。

TypingEffect()隨機選擇八個示例中的一個，然後調用type()將它們輸出爲佔位符。然後，在2000年的時間間隔後，它會施加擦除效果。

我認爲我的問題在於我的語法，更具體地說是TypingEffect()函數，但我無法弄清楚。

FIDDLE

HTML：

<form action="" method="get" type="search"> 
     <input type="text" class="textbox" placeholder='' />  
</form> 

的Javascript + jQuery的：

$(document).ready(function() { 
    setInterval ('cursorAnimation', 600); 
    textbox = $('.textbox'); 

    setInterval ('TypingEffect', 600); 
    setInterval ('ErasingEffect', 2000); 
}); 

function TypingEffect() { 
    var tag = Math.floor((Math.random() * 10) + 1); 
    if (tag = 1) { caption = "Example1" } 
    if (tag = 2) { caption = "Example2" } 
    if (tag = 3) { caption = "Example3" } 
    if (tag = 4) { caption = "Example4" } 
    if (tag = 5) { caption = "Example5" } 
    if (tag = 6) { caption = "Example6" } 
    if (tag = 7) { caption = "Example7" } 
    if (tag = 8) { caption = "Example8" } 
    type(); 
} 

function type() { 
    textbox.attr("placeholder", (caption.substr(0, captionLength++))); 
    if(captionLength < caption.length+1) { 
     setTimeout('type()', 50); 
    } else { 
     captionLength = 0; 
     caption = ''; 
    } 
} 

function ErasingEffect() { 
    caption = captionEl.html(); 
    captionLength = caption.length; 
    if (captionLength>0) { 
     erase(); 
    } 
} 

function erase() { 
    textbox.attr("placeholder",(caption.substr(0, captionLength--))); 
    if(captionLength >= 0) { 
     setTimeout('erase()', 50); 
    } else { 
     captionLength = 0; 
     caption = ''; 
    } 
} 

Answer 1

我更新了小提琴，使其工作。 https://jsfiddle.net/uxftux9w/5/ 有幾個問題，但我認爲有些是從你的代碼複製到jsfiddle，例如cursorAnimation變量，你沒有包括jQuery在小提琴

主要問題是使用setInterval像Shilly指出的。使用功能名稱，而不是像這樣setInterval('type()', 50)

setInterval(type, 50) 

另一個問題是事實，你使用兩種setInterval的如下

setInterval ('TypingEffect', 600); 
setInterval ('ErasingEffect', 2000); 

這些只會重複調用這兩個函數沒有串考慮到您嘗試輸入的標題長度的差異。

相反，我使用setTimeout延遲到TypingEffect和ErasingEffect函數的初始呼叫，並且向setInterval反覆調用type/erase功能，直到標題被完全輸入，或刪除。這是代碼。我添加了評論，所以我希望它有一定意義。如果你願意，有很多方法可以優化和減少重複。

HTML

<form action="search.php" method="get" type="search"> 
    <input type="text" class="textbox" placeholder='' /> 
</form> 

的JavaScript

$(document).ready(function() { 


var textbox = $('.textbox'), 
captionLength = 0, 
caption = '', 
id = setTimeout(TypingEffect, 600); //call onces and set an Id so it can be cleared 


function TypingEffect() { 
// console.log('TypingEffect'); 
var tag = Math.floor((Math.random() * 8) + 1); 

if (tag == 1) { 
    caption = "Example1" 
} 
if (tag == 2) { 
    caption = "Example Example 2" 
} 
if (tag == 3) { 
    caption = "Example3" 
} 
if (tag == 4) { 
    caption = "Example Example 4" 
} 
if (tag == 5) { 
    caption = "Example5" 
} 
if (tag == 6) { 
    caption = "Example Example Example 6" 
} 
if (tag == 7) { 
    caption = "Example7" 
} 
if (tag == 8) { 
    caption = "Example Example 8" 
} 

clearTimeout(id); //clear first clearTimeout(TypingEffect, 600) call 
captionLength = 1; //start at 0 
id = setInterval(type, 50); //call type every 50ms 
} 

function type() { 
// console.log('type', caption, caption.substring(0, captionLength++)); 
textbox.attr("placeholder", caption.substring(0, captionLength++)); 

//when finshed typing clear interval and call erase 
if (captionLength === caption.length + 1) { 
// console.log('end type'); 
    clearInterval(id); //clear clearInterval(type, 50) 
    id = setTimeout(ErasingEffect, 1000); //start erase call once after delay 
} 
} 

function ErasingEffect() { 
// console.log('ErasingEffect'); 
clearTimeout(id); //clear clearTimeout(ErasingEffect, 2000); call 
captionLength = caption.length; //start at end 
id = setInterval(erase, 50); //call erase every 50ms 
} 

function erase() { 
// console.log('erase'); 
textbox.attr("placeholder", caption.substring(0, captionLength--)); 

//when finshed erasing clear interval and call type 
if (captionLength < 0) { 
// console.log('end erase'); 
    clearInterval(id); //clear clearInterval(erase, 50) 
    id = setTimeout(TypingEffect, 1000); //start over 
} 
} 

}); 

更新 - 爲那些喜歡誰CSS

Here是類似的效果，我發現通過利·貝羅純CSS完成的。