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完成的。