一文字づつ表示させる方法

<div class="typing">一文字づつ表示させたい内容を入力</div>

1	<div class="typing">一文字づつ表示させたい内容を入力</div>

.typing {
  opacity: 0;
  }
.typing span {
  opacity: 0;
  }

1

2

3

4

5

6

.typing {

opacity: 0;

}

.typing span {

opacity: 0;

}

$(window).on('load',function(){
// テキストを<span></span>で自動的に囲む
$('.typing').children().andSelf().contents().each(function() {
if (this.nodeType == 3) {
$(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>'));
}
});
// 一文字ずつ表示させる
$('.typing').css({'opacity':1});
for (var i = 0; i <= $('.typing').children().size(); i++) {
$('.typing').children('span:eq('+i+')').delay(50*i).animate({'opacity':1},50);
};
});

1

2

3

4

5

6

7

8

9

10

11

12

13

$(window).on('load',function(){

// テキストを<span></span>で自動的に囲む

$('.typing').children().andSelf().contents().each(function() {

if (this.nodeType == 3) {

$(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>'));

}

});

// 一文字ずつ表示させる

$('.typing').css({'opacity':1});

for (var i = 0; i <= $('.typing').children().size(); i++) {

$('.typing').children('span:eq('+i+')').delay(50*i).animate({'opacity':1},50);

};

});

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル