javascript - 如何在暂停时链接jQuery动画？

嗨，我正在尝试在jQuery中做一个简单的链动画，每帧之间都有一个暂停（setTimeout）。

假设每个div的动画持续时间为3500。我想控制动画中每个不透明度淡入之间的持续时间。假设在第一个div和第二个div之间的持续时间为5秒，第二个和第三个帧之间的持续时间可能为10秒。

您将如何处理？

http://codepen.io/leongaban/pen/Feroh

当前代码

$('#blue').animate({
            opacity: '1'
      }, 3500, function(){

        // Need 5 sec pause here

        $('#blue').fadeOut('fast');
        $('#orange').animate({
            opacity: '1'
            }, 3500, function(){

              // Need a 10 sec pause here

              $('#orange').fadeOut('fast');
              $('#green').animate({
              opacity: '1' }, 3500);

            });
      });

最佳答案

这就是delay()和queue()的用途：

$('#blue').animate({opacity: '1'}, 3500).delay(5000).queue(function() {
    $(this).fadeOut('fast');
    $('#orange').animate({opacity: '1'}, 3500).delay(10000).queue(function() {
        $(this).fadeOut('fast');
        $('#green').animate({opacity: '1'}, 3500);
    });
});

FIDDLE