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は、以下のイベントをトリガ：

Answer 1

必ずすべての依存関係をインポートする（jqueryの+は、CSS +ポイ捨て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>