我正在尝试为一些文本添加动画。不同的div依次显示和隐藏,这样看起来就像一个单词被简化为一个字母,然后又完成了。
我需要在 .each() 周期之间有某种延迟。我尝试使用 setTimeOut() 函数,但我仍然看到所有 div 一起出现然后消失,而不是一个一个地出现。
function fadeInOut(element) {
$(element).fadeIn("slow", function() {
$(this).fadeOut("slow");
})
}
function displayStepWords() {
$('.stepWord').each(function(i) {
setTimeout(fadeInOut(this), 5000 * i);
})
}
displayStepWords();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stepWord">BYE</div>
<div class="stepWord">BY</div>
<div class="stepWord">B</div>
<div class="stepWord">BY</div>
<div class="stepWord">BYE</div>
最佳答案
不清楚您的具体目标是什么,但类似于:
function fadeInOut(element) {
$(element).fadeIn("slow", function() {
$(this).fadeOut("slow");
})
}
function displayStepWords() {
$('.stepWord').each(function(i) {
var me = $(this);
setTimeout( function(){fadeInOut(me);}, 1000 * i );
})
}
displayStepWords();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stepWord">BYE</div>
<div class="stepWord">BY</div>
<div class="stepWord">B</div>
<div class="stepWord">BY</div>
<div class="stepWord">BYE</div>
关于javascript - 文字动画: each and setTimeOut,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46114673/