如何在每次字符串迭代后调用回调函数?

时间:2017-04-04 13:44:23

标签: jquery

我正在使用jQuery库类型 - 它在这里找到:http://macarthur.me/typeit/docs/

这是我的代码

 $('.type-it').typeIt({
         strings: ['Text 1','Text 2'],
         speed: 110,
         breakLines: false,
         callback: function() { $('.type-it').css('background-color', '#EFC137').delay(1000).queue(function() {$('.type-it').empty() }) }
    })
    .tiPause(1000);

我想要做的是在键入每个字符串后运行回调函数,而不是在键入所有字符串之后运行。

有什么想法吗?

提前致谢。

1 个答案:

答案 0 :(得分:1)

如果库不支持它,我们可以将单个字符串传递给该函数。这是一个黑客攻击。



$(document).ready(function() {
  var ara = ['Text 1', 'Text 2'].reverse();
  doType();

  function doType() {
    var x = ara.pop();
    $('.type-it').typeIt({
      strings: [x],
      speed: 110,
      breakLines: false,
      callback: function() {
        $('.type-it').css('background-color', '#EFC137').delay(2000).queue(function() {
          $('.type-it').empty();
          $('.type-it').css('background-color', 'transparent');
          if (ara.length > 0)
            doType();
        })
      }
    });
  }
});

.type-it {
  transition: all 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<div class="type-it"></div>
&#13;
&#13;
&#13;