javascript - 逐一淡入div内容

Question

我在 div 中有一些内容，基本上 div 将被隐藏，现在我希望当我按下按钮时，div 内容将使用 fadeIn 功能显示，现在我的问题我想一个一个地显示 div 内容意味着一个字母fadeIn 然后另一个但在我的情况是逐字逐句完成。

HTML

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

JS

$("input[type=button]").click(function(){
    $("div").show();
        $("span").each(function(index) {
        $(this).delay(400*index).fadeIn(300);
    });
});

CSS

div { display:none }

小提琴Here

Answer 1

诀窍是将您的跨度分成较小的跨度，每个字母一个，并用于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);
  });
});

示范

Answer 2

你也可以这样做：

$("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);
});

演示:: jsFiddle

Answer 3

演示

$(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);
    });
});

Answer 4

演示http://jsfiddle.net/krasimir/4GmSF/1/

HTML

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

CSS

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

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);
    });
});