jQuery Textillate.js - 如何「重置」html元素並重新啓動動畫

我使用Textillate.js（http://jschr.github.io/textillate/）在html中跨區域動畫文本。jQuery Textillate.js - 如何「重置」html元素並重新啓動動畫

動畫是由按鈕點擊（'in'）手動觸發的。
動畫之後/期間，用戶可以點擊「重置」按鈕重新設置回到起始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>

任何想法真的會被讚賞！我一直試圖讓這個工作幾個小時 - 搜索和發現了很多偉大的建議，但在這種情況下沒有任何幫助...感謝您提供任何幫助。：o）

來源

2016-10-10 Nick

有人已經做出工作提琴在這裏：http://jsfiddle.net/jschr/mGgd5/ –

感謝 - 但實際上這是我開始工作的小提琴 - 我用它作爲我的小提琴的基礎。問題是（除了需要初始隱藏直到按鈕被點擊），我需要它「重置」並立即隱藏 - 並保持隱藏，直到再次單擊「入」按鈕。原來的小提琴，開始它，但它不隱藏直到手動觸發以再次顯示和動畫。我希望我有道理。：o） – Nick

Got you！我會創建一個小提琴並將其作爲答案發布。 –

我找不到textillate的re-init事件，但您可以做的是刪除並重新創建復位元素。並將這些選項包裝在一個函數中，並在'點擊'中調用它。它會工作，但我不是一個JS專家，所以非常確定有更好的方法來做到這一點。

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

Here is the fiddle

來源

2016-10-11 09:44:42

而不是「重置，我結束了使用手動調用到textillate」out「設置爲零秒延遲，然後我可以手動調用」in「。但是，您的解決方案也可以，我可能會使用它在另一個項目。謝謝！ – Nick

@尼克歡迎您，我相信您可以在一段時間後找到更好的解決方案:) –

jQuery Textillate.js - 如何「重置」html元素並重新啓動動畫

回答

相關問題