使用JQuery淡化字符串字符？

这是我的代码。 由于某种原因，整个String一次淡入而不是每个单独的字符。 我的console.log显示正在逐个执行的字符。 为什么整个字符串一次淡入？ for循环中的语句不应该为每个字符执行吗？

    $(function() { string = " David"; for(i = 0; i < string.length; i++) { $('#fadeIn').append(string[i]).delay(1000).hide().fadeIn(1000); console.log(string[i]); } });    
   

Answer 1

要使单个字母淡入，它们需要是DOM元素。

 $(function() { var string = " David"; var q = jQuery.map(string.split(''), function (letter) { return $(''+letter+''); }); var dest = $('#fadeIn'); var c = 0; var i = setInterval(function () { q[c].appendTo(dest).hide().fadeIn(1000); c += 1; if (c >= q.length) clearInterval(i); }, 1000); }); 

http://jsfiddle.net/bGsa3/5/

Answer 2

for循环正在执行延迟，一次追加并淡入所有字母，因此它们将同时显示。 您希望使用setInterval执行此操作：

 var string = "David", stringCount = 0; setInterval(function(){ $('#fadeIn').append(string[stringCount]); stringCount += 1; },1000); 

工作小提琴： http ： //jsfiddle.net/bGsa3/

Answer 3

我有点想过这个，并且相信这会更好地服务于$.Deferred()这允许动画成为你想要的任何东西，如果你改变它，它不会影响其余部分 – 动画控制时间，通过触发自定义事件完成“完成”并在完成时启动下一个字母。

没什么好看的，就像你问的那样。

简单标记：

例如：

 var myString = " Freddy The Mark"; var i = 0; // used to iterate the string, could be done other ways var myEffect = function (c) { return $("#animator").append(c).fadeIn(800).delay(800).fadeOut(1); }; $("#animator").on("show", function () { var c = myString[i]; $.when(myEffect(c)).done(function () { i++; if (i < myString.length) { $('#animator').trigger('show'); } else { $("#animator").show();//show it when we are done } }); }); $('#animator').trigger('show'); //get started by firing the custom event handler 

将它们放在一个样本中： http ： //jsfiddle.net/N8eRN/1/