Question

我正在尝试使用jquery模拟名称的输入，这是我到目前为止所拥有的：

var name = "hello there!";
var namesplit = name.split('');     
$(document).ready(function () {
    for (var i = 0; i < namesplit.length; i++) {
        $('.wrapper h1').append(namesplit[i]);
    }
});

基本上，我想要的是“你好！”中的每个角色！要输入，稍有延迟，然后是下一个字符。此外，这是插入到其中具有跨度的h1（其包含字符“|”）。我怎么能阻止这个覆盖跨度（即它应该是这样的：你好！| NOT |你好！）。谢谢！

Answer 1

在h1

中添加另一个范围

<div class="wrapper">
     <h1><span></span><span>|</span></h1>
</div>

然后

$(document).ready(function () {
    var name = "hello there!";
    var namesplit = name.split('');

    $.each(namesplit, function (i, v) {
        setTimeout(function () {
            $('.wrapper h1 span:first').append(namesplit[i]);
        }, i * 100)
    })
});

演示：Fiddle

如果你正在使用一个非常大的字符串，那么创建这么多次并不是一个好主意，然后尝试

$(document).ready(function () {
    var name = "hello there!";
    var namesplit = name.split('');

    function print() {
        if (!namesplit.length) {
            return;
        }
        $('.wrapper h1 span:first').append(namesplit.shift());
        setTimeout(print, 100)
    }

    print()
});

演示：Fiddle

Answer 2

<html>
 <head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <script type='text/javascript'>
    $(function () {

     var name = "hello there!";
     var namesplit = name.split('');
     for (var i = namesplit.length-1; i >=0; i--) {
        $('.wrapper').prepend(namesplit[i]);
     }
   });
  </script>
</head>
<body>
    <h1><span class="wrapper">|</span></h1>
</body>
</html>

Answer 3

你可以编写一个函数来完成这项工作，或者创建一个构造函数，这样你就可以在页面中同时拥有许多这样的动画：

function TypeIt(id, msg, delay) {
  this.el = document.getElementById(id);
  this.msg = msg;
  this.delay = delay;
  this.index = 0;
}

TypeIt.prototype.run = function() {
  var typeit = this;
  this.el.innerHTML = this.msg.substring(0, ++this.index);
  if (this.index < this.msg.length) {
    setTimeout(function(){typeit.run();}, this.delay); 
  }
}

window.onload = function(){
  var typeit = new TypeIt('d0', 'Hello World!', 100);
  typeit.run();
}

如果只需要一个实例，可以使用模块模式或类似的简单函数重构上述实例：

function typeIt(id, msg, delay, index) {
  index = index || 0;
  document.getElementById(id).innerHTML = msg.substring(0, ++index);
  if (index < msg.length) {
    setTimeout(function(){typeIt(id, msg, delay, index)}, delay);
  }
}

为数组中的每个项添加延迟

3 个答案: