javascript - 使用 JQuery 安排单个 setTimeout 事件串行发生

Question

我希望使用 JQuery 创建文本转换动画，但遇到了时间问题。我查看了其他一些线程，但无法找到我想要完成的任务的正确解决方案。这是我的 HTML:

<div id="t1">
    <span>T</span>
    <span>H</span>
    <span>I</span>
    <span>S</span>
</div>
<div id="t2">
    <span>T</span>
    <span>H</span>
    <span>A</span>
    <span>T</span>
</div>

JS:

function showMessage(obj, up){
    if(dir){
        $(obj).children().each(function(i, el) {
            setTimeout(function() {
                $(el).animate({
                    'opacity': 1.0,
                    'top': '0px'
                }, 450);
            }, 500 + (i * 150));
        });
    } else {
        $(obj).children().each(function(i, el) {
            setTimeout(function() {
                $(el).animate({
                    'opacity': 0,
                    'top': '-30px'
                }, 450);
            }, 3000 + (i * 150));
        });
    }
}
showMessage("#t1", true);
showMessage("#t1", false);
showMessage("#t2", true);
showMessage("#t2", false);

THIS 和 THAT 同时显示。我怎样才能做到在第一个完全消失之前才显示第二个？

演示:jsfiddle

Answer 1

你能把它们串起来吗？

showMessage("#t1", true, function(){
  showMessage("#t1", false, function(){
    showMessage("#t2", true, function(){
       showMessage("#t2", false, function(){});
    });
  });
});

然后在 showMessage 中包含计数器以检查是否已显示所有范围

    function showMessage(obj, up, callback){
    var counter = 1;
    var numberOfChildren = $(obj).children().size();
    if(up){
        $(obj).children().each(function(i, el) {
            setTimeout(function() {
                $(el).animate({
                    'opacity': 1.0,
                    'top': '0px'
                }, 450, function(){
                counter++;
                console.log(counter);
                if ( counter == numberOfChildren )
                {
                    callback();
                }
            });
            }, 500 + (i * 150));
        });
    } 
    else {
        $(obj).children().each(function(i, el) {
            setTimeout(function() {
                $(el).animate({
                    'opacity': 0,
                    'top': '-30px'
                }, 450, function(){
                counter++;
                console.log(counter);
                if ( counter == numberOfChildren )
                {
                    callback();
                }
            });
            }, 3000 + (i * 150));
        });
    }
}
$(function() {
   showMessage(".dev", true, function(){
    showMessage(".dev", false, function(){
      showMessage(".dev2", true, function(){
         showMessage(".dev2", false, function(){});
      });
    });
  });
});

已将 dir 更新为 up。