我知道有很多例子,但在我的例子中,我不明白这是怎么做的。
我必须setTimeout()
功能,我需要在第一次结束时运行第二个timeout
。
var title = $(".form-title").attr("data-title");
var fname = $(".form-name").attr("data-name");
$.each(title.split(''), function(i, letter) {
setTimeout(function() {
$('.form-title').html($('.form-title').html() + letter);
}, 100 * i);
});
$.each(fname.split(''), function(i, letter) {
setTimeout(function() {
$('.form-name label:nth-of-type(1)').html($('.form-name label:nth-of-type(1)').html() + letter);
}, 100 * i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h2 class="form-title" data-title="Dear Concept Studio,"></h2>
<p class="form-name" data-name="Hello, I'm">
<label></label>
</p>
&#13;
答案 0 :(得分:2)
你没有。但是当计数器到达最后一个元素时,您可以使用counter
来调用该函数。
我做了什么:
counter
变量counter
counter
是否等于字符串的length
,如果是,则调用为第二个字符串设置动画的函数。
var title = $(".form-title").attr("data-title");
var fname = $(".form-name").attr("data-name");
var counter = 0;
$.each(title.split(''), function(i, letter) {
setTimeout(function() {
$('.form-title').html($('.form-title').html() + letter);
++counter === title.length && animateSecond();
}, 100 * i);
});
function animateSecond() {
$.each(fname.split(''), function(i, letter) {
setTimeout(function() {
$('.form-name label:nth-of-type(1)').html($('.form-name label:nth-of-type(1)').html() + letter);
}, 100 * i);
});
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h2 class="form-title" data-title="Dear Concept Studio,"></h2>
<p class="form-name" data-name="Hello, I'm TJ. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, corporis, omnis? Maiores alias expedita, quis, aliquam, assumenda deserunt molestias maxime non, natus cupiditate illo harum. Amet autem inventore quis adipisci!">
<label></label>
</p>
&#13;