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

时间:2012-11-16 22:51:41

标签: jquery function animation loops

我有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)时,它不起作用。其次,我不知道如何应用我之后的延迟。有什么建议吗?

1 个答案:

答案 0 :(得分: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>​

WORKING DEMO