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会触发以下事件：

Answer 1

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

编辑：

＆＃13;

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.'));

＆＃13;

<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>

＆＃13;

textillate.js的循环结束确定处理

1 个答案: