jQuery Textillate.js - 要素のHTMLをリセットしてアニメーションを再起動する方法

Question

私はスパンのhtmlにTextillate.js（http://jschr.github.io/textillate/）を使ってテキストをアニメートしています。

アニメーションは、ボタンクリック（ '入力'）によって手動でトリガーされます。
アニメーションの実行後、ユーザーは「リセット」ボタンをクリックして、スパンを開始HTML（非表示）に戻すことができます。 その後、アニメーションは手動で "in"ボタンをクリックして実行する必要がありますが、動作させることができません。

私がやろうとしていますかを確認することを容易にするため、私はこのフィドルを作成しました：

$('#tlt').textillate({ 
 
    autoStart: false, 
 
    loop: true, 
 
    in : { effect: 'bounceInRight' } 
 
}); 
 

 
$('.in').on('click', function() { 
 
    $('#tlt').textillate('in'); 
 
}); 
 

 
$('.out').on('click', function() { 
 
    $('#tlt').textillate('out'); 
 
}); 
 

 
$('.reset').on('click', function() { 
 
    $('#tlt').html('Some text'); 
 
});

#tlt { 
 
    font-size:30px; 
 
} 
 
.hideme { 
 
    visibility:hidden; 
 
}

<link href="http://jschr.github.io/textillate/assets/animate.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script> 
 
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script> 
 

 
<span id="tlt" class='hideme'>Some text</span> 
 
<br/> 
 
<button class="in">in</button> 
 
<button class="reset">Reset/Hide</button>

：ここ

http://jsfiddle.net/nlapolla/mGgd5/225/

はフィドルコードですどんなアイデアも本当にありがとう！私はこれを何時間も働かせようとしていました - それでSOを探し、たくさんのアドバイスを見つけましたが、この場合は何も助けてくれませんでした...あなたが提供できる何か助けてくれてありがとう。 ：o）

Answer 1

私はtextillateの再初期化イベントを見つけることができませんが、リセット時に要素を削除して再作成することができます。そして、オプションを関数にラップし、 'in'クリックで呼び出します。それはうまくいくだろうが、私はJSの専門家ではないので、これを行うもっと良い方法があると確信している。

function animate(el) { 
    $(el).textillate({ 
    autoStart: false, 
    loop: true, 
    in : { 
     effect: 'bounceInRight' 
    } 
    }); 
} 

Here is the fiddle