简而言之,我通过追加添加同一个类的元素,然后我想使用typed.js为它们设置动画。我为此写了一个小功能,不幸的是它是一个问题。每个前一个字符串都是循环的,并且在一个圆圈中设置相同的效果。我怎么能改变这个?
这个图书馆:http://www.mattboldt.com/demos/typed-js/
function animateConsole(string) {
$("#console-content").append('<p class="bash-line"></p>');
$(".bash-line").each(function() {
var typed = new Typed(this, {
strings: [string],
typeSpeed: 10,
showCursor: false,
});
});
}
$(document).ready(function) {
setTimeout(function() {animateConsole('<span>//</span>GET CONNECTION SECRET');}, 3500);
setTimeout(function() {animateConsole('<span>//</span>SENDING REQUEST');}, 4500);
setTimeout(function() {animateConsole('<span>//</span>WAITING FOR RESPONSE');}, 6500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="console-content"></div>
答案 0 :(得分:1)
第$(".bash-line").each(
行定位所有.bash-line
元素(甚至之前添加的 )
因此,您需要保留刚创建的引用,并在初始化Typed
插件时使用它。
function animateConsole(string) {
var bash = $('<p class="bash-line"></p>');
$("#console-content").append(bash);
var typed = new Typed(bash.get(0), {
strings: [string],
typeSpeed: 10,
showCursor: false,
});
}
$(document).ready(function() {
setTimeout(function() {animateConsole('<span>//</span>GET CONNECTION SECRET');}, 3500);
setTimeout(function() {animateConsole('<span>//</span>SENDING REQUEST');}, 4500);
setTimeout(function() {animateConsole('<span>//</span>WAITING FOR RESPONSE');}, 6500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.6/lib/typed.min.js"></script>
<div id="console-content"></div>