Javascript FadeIn div内容一个接一个

我在div中有一些内容，基本上div将被隐藏，现在我想当我按下按钮时，div内容将显示为fadeIn功能，现在我的问题是，我想显示div内容，一个一个字母，然后是另一个，但在我的情况下，它将逐字进行

HTML

CSS

---

Fiddle

诀窍是将跨度分成更小的跨度，每个字母对应一个跨度，然后使用

setTimeout

依次淡出这些跨度：

$("input[type=button]").click(function(){
  var $div = $('div');
  $div.html($div.text().split('').map(function(l){
      return '<span style="display:none;">'+l+'</span>'
  }).join('')).show().find('span').each(function(i, e){
      setTimeout(function(){ $(e).fadeIn() }, i*100);
  });
});

$（“输入[type=button]”）。单击（函数（）{
变量$div=$（'div'）；
$div.html（$div.text（）.split（“”）.map（函数（l）{
返回“+l+”
}).join（“”））.show（）.find（'span'）.each（函数（即）{
setTimeout（函数（）{$（e）.fadeIn（）}，i*100）；
});
});

您还可以：

$("input[type=button]").click(function(){

    $("div").find("span").hide();
    $("div").show();
    var spanEle = $("span"),
        contentArray = spanEle.text().split(""),
        current = 0;
        spanEle.text('');
        setInterval(function() {
            if(current < contentArray.length) {
                spanEle.text(spanEle.text() + contentArray[current++]).fadeIn("slow");
            }
        }, 100);
});

$（“输入[type=button]”）。单击（函数（）{
$（“div”）.find（“span”）.hide（）；
$（“div”）.show（）；
var spanEle=$（“span”），
contentArray=spanEle.text（）.split（“”），
电流=0；
spanEle.文本（“”）；
setInterval（函数（）{
if（当前

演示：：

$（函数（）{
$（“#测试”）。单击（函数（）{
var dest=$（'div span#char'）；
var c=0；
var string=dest.text（）；
dest.text（“”）.parent（）.show（）；
var q=jQuery.map（string.split（“”），函数（字母）{
返回$（''+字母+''）；
});
变量i=设置间隔（函数（）{
q[c].appendTo（dest.hide（）.fadeIn（1000）；
c+=1；
如果（c>=q.length）净间隔（i）；
}, 100);
});
});

演示

HTML

JavaScript

var transformText = function(selector) {
    var div = $(selector);
    var words = div.text().split(" ");
    var newHTML = '';
    for(var i=0; word=words[i]; i++) {
        newHTML += '<span>' + word + '</span> ';
    }
    div.html(newHTML);
}
$("input[type=button]").click(function(){
    transformText("div");
    $("div").show();
    $("div span").each(function(index) {
        (function(span, index) {
            setTimeout(function() {
                span.css("opacity", 0);
                span.animate({
                    opacity: 1
                });
            }, index*100);    
        })($(this), index);
    });
});

var transformText=函数（选择器）{
var div=$（选择器）；
var words=div.text（）.split（“”）；
var newHTML=''；
for（var i=0；word=words[i]；i++）{
newHTML+=''+单词+''；
}
div.html（newHTML）；
}
$（“输入[type=button]”。单击（函数（）{
转换文本（“div”）；
$（“div”）.show（）；
$（“div span”）。每个函数（索引）{
（函数（跨度、索引）{
setTimeout（函数（）{
css（“不透明度”，0）；
动画制作({
不透明度：1
});
}，指数*100）；
})（$（本），指数）；
});
});

$("input[type=button]").click(function(){
  var $div = $('div');
  $div.html($div.text().split('').map(function(l){
      return '<span style="display:none;">'+l+'</span>'
  }).join('')).show().find('span').each(function(i, e){
      setTimeout(function(){ $(e).fadeIn() }, i*100);
  });
});

$("input[type=button]").click(function(){

    $("div").find("span").hide();
    $("div").show();
    var spanEle = $("span"),
        contentArray = spanEle.text().split(""),
        current = 0;
        spanEle.text('');
        setInterval(function() {
            if(current < contentArray.length) {
                spanEle.text(spanEle.text() + contentArray[current++]).fadeIn("slow");
            }
        }, 100);
});

$(function () {
    $('#test').click(function () {
        var dest = $('div span#char');
        var c = 0;
        var string = dest.text();
        dest.text('').parent().show();
        var q = jQuery.map(string.split(''), function (letter) {
            return $('<span>' + letter + '</span>');
        });
        var i = setInterval(function () {
            q[c].appendTo(dest).hide().fadeIn(1000);
            c += 1;
            if (c >= q.length) clearInterval(i);
        }, 100);
    });
});

<div>THIS IS EXAMPLE OF FADE IN WORLD ONE BY ONE IN ALPHABETIC ORDER</div>
<input type='button' value='click me'/>

div {
    display: none;
}
div span {
    opacity: 0;
}

var transformText = function(selector) {
    var div = $(selector);
    var words = div.text().split(" ");
    var newHTML = '';
    for(var i=0; word=words[i]; i++) {
        newHTML += '<span>' + word + '</span> ';
    }
    div.html(newHTML);
}
$("input[type=button]").click(function(){
    transformText("div");
    $("div").show();
    $("div span").each(function(index) {
        (function(span, index) {
            setTimeout(function() {
                span.css("opacity", 0);
                span.animate({
                    opacity: 1
                });
            }, index*100);    
        })($(this), index);
    });
});