打字机附加淡入效果

Question

你好，我想制作一个打字机效果，并加上 fadeIn 特效，但我的方法不起作用。请问如何在这个脚本中添加 fadeIn 特效呢？

<div class="inner container">
    <h2>Typewriter test</h2>
</div>

var title = $('.inner h2').html();
$('.inner h2').html('');
var arrayTitle = title.split('');
var i = 0;
var interval = setInterval(function () {
    if (i > arrayTitle.length) {
        $('.inner h2').html(title);
        clearInterval(interval);
    } else {
        //$('arrayTitle[i]').hide().appendTo('.inner h2').fadeIn();
        $('.inner h2').append(arrayTitle[i]).fadeIn(50);
        i++;
    }
}, 50);

- Zolax

---

+1 为了这个可爱的小显示效果......欢迎来到 StackOverflow :) - iCollect.it Ltd

Answer 1

你不能像那样逐个字符地使用 fadeIn - 你的 fadeIn() 调用是应用于整个标题，它已经可见了。如果你将每个字符添加为 <span>，你可以淡入 那个：

var header = $('.inner h2');

var title = header.text();
header.text('');        

var arrayTitle = title.split('');
var i = 0;

var interval = setInterval(function(){
  if (i > arrayTitle.length) 
  {
    header.text(title);        // wipe out the <span> tags
    clearInterval(interval);
  } 
  else
  {
    $('<span>')
      .text(arrayTitle[i])
      .appendTo(header)
      .hide()
      .fadeIn(50);

    i++;      
  }
}, 50);

示例，使用更长的时间间隔以更清晰地显示淡入效果：http://codepen.io/paulroub/pen/ixBdm

- Paul Roub