0

私は2つのjqueryアニメーションを持っています。両方とも無限にループさせたいです。2 番目のアニメーションには 3 秒の遅延が必要ですが、それがトリガーされるのは最初の時だけです。2 番目のアニメーションが開始されたら、遅延は必要ありません。

わかりやすくするために、これまでのコードを簡略化したバージョンを作成しました。

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();

したがって、これには2つの問題があります。まず、2 番目の関数 (block2) を呼び出そうとすると、機能しません。第二に、遅延を適用する方法がわかりません。助言がありますか？

4

1 に答える 1

0

このコードを使用して最初に遅延を設定すると、アニメーションは遅延なしで無限に機能します。setTimeout は、指定された遅延で block1 関数を呼び出します。最初のアニメーションが完了すると、2 番目のアニメーションが呼び出され、これが無期限に続きます。

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 に答える