setTimeout多次

Question

我正在使用setTimeout在页面加载时为svg徽标设置动画。动画中包含3个步骤：

第1步：在页面加载时淡入徽标。

步骤2：1秒钟后为徽标图标设置动画（使用CSS转换来移动图标）。

第3步：在1秒后淡入徽标中的句点/点。

这一切都很好，但是感觉应该有一种更有效的方法，我希望有人可以指出正确的方向。这是我的代码：

$(window).ready(function(){
  // fadein logo as page loads (CSS opacity).
  setTimeout(function() { 
    $('.logo').css('opacity', '1') 
  },1000);

  // move logo icon 1 second later (CSS translateX).
  setTimeout(function() { 
    $('.move').addClass('active') 
  }, 2000);

  // fadein period 1 second later (CSS opacity).
  setTimeout(function() { 
    $('.period').css('opacity', '1') 
  }, 3000);
});

感谢您的帮助。

Answer 1

好吧，您可以尝试像这样嵌套它们。

$(window).ready(function({ 
  setTimeout(function() { 
    $('.logo').css('opacity', '1');

    setTimeout(function() { 
      $('.move').addClass('active') ;

      setTimeout(function() { 
        $('.period').css('opacity', '1') ;
      }, 1000);
    }, 1000);
  },1000); 
});

注意：我在用手机，所以无法测试。