Question

您好我正在尝试在jQuery中执行一个简单的链动画，每帧之间有一个暂停（setTimeout）。

假设每个div的动画持续时间为3500.我想控制动画中每个不透明度渐变之间的持续时间。在第一个div和第二个div之间说，持续时间是5秒，在第2帧和第3帧之间可能是10秒。

你会怎么做？

当前代码

$('#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);

            });
      });

Answer 1

这就是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

Answer 2

这正是.delay（）的用途（http://api.jquery.com/delay/）。它允许您为各个元素编写优雅的动画链，如下所示：

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

请注意，您仍然需要使用回调来为其他对象启动动画。

在你的情况下，这应该是它（未经测试）：

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

Answer 3

您可以使用带有回调的jQuery fadeOut / fadeIn方法。

有关详细信息，请参阅here。

但基本上是;

$(".myClass").fadeOut(1000, function() {
    //fadeOut complete
});

第一个参数是时间长度（以毫秒为单位），直到它完全淡出为止。在该持续时间过去之后，回调将触发。因此，您可以放心地假设当回调触发您所需的等待时间已经完成时。

这与fadeIn的语法相同，但我建议阅读我提供的链接。它会更详细地解释它。

如何用暂停链接jQuery动画？

3 个答案: