Question

我有2个jquery动画。我希望他们两者无限循环。第二个动画需要延迟3秒，但只有第一次触发时才会延迟。第二个动画开始后，就不需要延迟了。

到目前为止，我已经创建了一个条带化的代码版本，以使其更清晰。

HTML：

<div class="block1"></div>
<div class="block2"></div>

CSS：

div.block1,
div.block2 { 
  position: absolute;
  display: block;
  top: -100%;
  height: 100%;
  width: 100%; }

jQuery

function block1(){
  $("#block1").animate({ top: '100%'}, 6000, 'linear', function(){ $(this).css('top', '-100%') });
  block1();
}

function block2(){
  $("#block2").animate({ top: '100%'}, 6000, 'linear', function(){ $(this).css('top', '-100%') });
  block2();
}

block1();
block2();

所以我有两个问题。首先，当我尝试调用第二个函数（block2）时，它不起作用。其次，我不知道如何应用我之后的延迟。有什么建议吗？

Answer 1

您可以使用此代码初始设置延迟，然后动画将无限制地工作而不会有任何延迟。 setTimeout将以指定的延迟调用block1函数，一旦第一个动画完成，它将调用第二个，这将继续无限期。

JS：

function block1() {
    $(".block1").animate({
        top: '+=10px'
    }, 600, 'linear', function() {
        block2();
    });
}

function block2() {
    $(".block2").animate({
        top: '+=10px'
    }, 600, 'linear', function() {
        block1();
    });
}

setTimeout(block1, 3000);

CSS：

div.block1, div.block2 { 
  position: absolute;
  display: block;
  top: 0;
  height: 100px;
    width: 100px; 
   background-color: red; 
}

div.block2 { top: 200px; }

HTML：

<div class="block1">Block 1</div>
<div class="block2">Block 2</div>

WORKING DEMO

循环2 jquery动画，初始延迟为1

1 个答案: