2

私はdivにいくつかのコンテンツを持っています。基本的にdivは非表示になります。ボタンを押すと、divコンテンツがfadeIn関数で表示されます。今私の問題は、divコンテンツを1つずつ表示したいということです。私の場合、それは単語ごとに行われます。

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

4

4 に答える 4

5

トリックは、スパンを小さなスパンに分割し、文字ごとに 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);
  });
});

デモンストレーション

于 2013-09-13T07:00:47.110 に答える
0

デモ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);
    });
});
于 2013-09-13T07:09:58.593 に答える