javascript - Javascript/jQuery ループ

Question

テキストでアニメーション化してからアニメーション化するjQueryが少しあります。アニメーションのパラメーターは PHP 経由で渡されます。アニメーションをループする必要がありますが、アニメーションが完了した後でのみですが、うまくいきません。

<?php if ($text1_1 != "") { ?>

  setTimeout(one_1,0);                              // From 0 to duration
  setTimeout(one_2,<?php echo $duration * 2 ?>);    
  // From duration x2 to duration x3

<?php } ?> 
    

<?php if ($text2_1 != "") { ?> 

 setTimeout(two_1,<?php echo $duration * 3 ?>);     // From duration x3 to duration x4
 setTimeout(two_2,<?php echo $duration * 5 ?>);     // From duration x5 to duration x6

<?php } ?> 

<?php if ($text1_1 != "") { ?> 

  function one_1() {
      $('.text-1_1').animate({ <?php echo $animate1_1 ?>: '<?php echo $text1_1_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
      $('.text-1_2').animate({ <?php echo $animate1_2 ?>: '<?php echo $text1_2_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
      $('.text-1_3').animate({ <?php echo $animate1_3 ?>: '<?php echo $text1_3_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
      $('.text-1_4').animate({ <?php echo $animate1_4 ?>: '<?php echo $text1_4_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
      $('.text-1_5').animate({ <?php echo $animate1_5 ?>: '<?php echo $text1_5_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
  }

  function one_2() {
      $('.text-1_1').animate({ <?php echo $animate1_1 ?>: '<?php echo $text1_1_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
      $('.text-1_2').animate({ <?php echo $animate1_2 ?>: '<?php echo $text1_2_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
      $('.text-1_3').animate({ <?php echo $animate1_3 ?>: '<?php echo $text1_3_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
      $('.text-1_4').animate({ <?php echo $animate1_4 ?>: '<?php echo $text1_4_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
      $('.text-1_5').animate({ <?php echo $animate1_5 ?>: '<?php echo $text1_5_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');    
  }

<?php } ?>

アニメーションが終了した後、関数 one_1() と関数 one_2() をループさせるにはどうすればよいでしょうか。同様の機能がさらに増える可能性もあります。

これが少し曖昧な場合は非常に申し訳ありません！それを説明するのに少し問題があります。

ご覧いただきありがとうございます。

score 0 · Accepted Answer

ここで説明されているように、アニメーション終了コールバックを使用できます: http://api.jquery.com/animate/

$(element).animate( { animation params }, duration, function(){
    // this is the animation finish callback
});

私の提案は、再帰関数を使用し、アニメーションを内部に配置し、アニメーションが終了したときに再帰的に呼び出すことです

score 0 · Accepted Answer

このようなものをテンプレートとして使用できます。各グループ内のデュレーションが同じでない場合は、セットアップにかなり多くのロジックが必要になるため、すべてのアニメーションデータを各アニメーションにエコーするのではなく、配列として提供することをお勧めします。

function one_1() {  

    /* use complete callback of  one animation to call next function*/
    $('.text-1_5').animate({ /* anim*/}, /*duration*/, /* easing*/, function(){
       /* this animation is complete, call next function */
        two_1();                                                                                 
    });

    /* other animations for this group*/

}

score -1 · Accepted Answer

多分解決策setTimeoutは

setInterval(two_1,<?php echo $duration; ?>);
setInterval(two_2,<?php echo $duration; ?>);

$duration * 3アニメーションがすべて同時に開始されるため、実行する必要があります。

javascript - Javascript/jQuery ループ

3 に答える 3

Related

Reference