0

我有 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）时，它不起作用。其次，我不确定如何应用我所追求的延迟。有什么建议么？

4

1 回答 1

0

您可以使用此代码最初设置延迟，然后动画将无限工作而没有任何延迟。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>​

工作演示

于 2012-11-16T23:10:21.363 回答