textillate.js的循环结束判断处理

Question

每次循环结束都想换效果

・所以我想先实现循环结束判断处理

因此，每次循环结束，我都想显示一个提示

・我创建了以下代码但失败了

· 我想在每次退出循环时显示一个警告，但实际上我只看到一次警告

<div class="hoge">
  <ul class="texts" style="display: none">
    <li>string1</li>
    <li>string2</li>
  </ul>
</div>

var effectAry=['flash','bounce','shake','tada','swing','wobble'];
var data = {
  loop: true,
  in: {'effect':effectAry[0]},
  out: {'effect':effectAry[1]}
};
$('.hoge').textillate(data);
$('.hoge').on('start.tlt', console.log('-----start.tlt triggered.'))
.on('inAnimationBegin.tlt', console.log('inAnimationBegin.tlt triggered.'))
.on('inAnimationEnd.tlt', console.log('inAnimationEnd.tlt triggered.'))
.on('outAnimationBegin.tlt', console.log('outAnimationBegin.tlt triggered.'))
.on('outAnimationEnd.tlt', console.log('outAnimationEnd.tlt triggered.'))
.on('end.tlt', alert('-----★end.tlt'));

Events

Textillate triggers the following events:

Answer 1

试试这个，确保导入所有依赖项（jquery + animate css + littering js）并使用 out.callback 方法结束函数。

已编辑：

var effectAry = ['flash', 'bounce', 'shake', 'tada', 'swing', 'wobble'];
var data = {
  loop: true,
  in: {
    effect: effectAry[0]
  },
  out: {
    effect: effectAry[1],
    callback: function(){
      alert('-----★end.tlt')
    }
  },
};
$('.hoge').textillate(data);
$('.hoge').on('start.tlt', console.log('-----start.tlt triggered.'))
.on('inAnimationBegin.tlt', console.log('inAnimationBegin.tlt triggered.'))
.on('inAnimationEnd.tlt', console.log('inAnimationEnd.tlt triggered.'))
.on('outAnimationBegin.tlt', console.log('outAnimationBegin.tlt triggered.'))
.on('outAnimationEnd.tlt', console.log('outAnimationEnd.tlt triggered.'));

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<div class="hoge">
  <ul class="texts" style="display: none">
    <li>string1</li>
    <li>string2</li>
  </ul>
</div>

textillate.js的循环结束判断处理

Loop end determination processing of textillate.js

javascript

jquery

animation

jquery-plugins