Javascript/jQuery Loop

Question

일부 텍스트에서 움직이는 jQuery가 있습니다. 애니메이션의 매개 변수는 PHP를 통해 전달됩니다. 반복 할 애니메이션이 필요하지만 애니메이션이 완료된 후에 만 ​​애니메이션을 완성 할 수는 있습니다. 그들은 완성 된 애니 메이팅을했습니다 후 루프 기능 one_1()를 & 기능 one_2() 얻을 것 어떻게

<?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 } ?> 

. 비슷한 기능이있을 가능성도 있습니다.

매우 불편을 드려 죄송합니다. 그것을 설명하는 데 약간의 어려움이 있습니다.

감사합니다.

Answer 1

은 아마 솔루션은 애니메이션이 같은 시간에 모든 시작하기 때문에 여기에 설명 된 바와 같이 지금

Answer 2

당신은 애니메이션 마무리 콜백을 사용할 수 $duration * 3을하고 거기에 필요가있다

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

으로 setTimeout을 대체하는 것입니다 : http://api.jquery.com/animate/

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

나의 제안은 사용하는 것입니다 재귀 함수, 애니메이션을 안에 넣고 애니메이션이 끝나면 재귀 적으로 호출하십시오.

Answer 3

다음과 같은 것을 템플릿으로 사용할 수 있습니다. 각 그룹의 지속 시간이 동일하지 않은 경우 설정하는 데 더 많은 로직이 필요하며 모든 애니메이션 데이터를 배열로 제공하고 각 애니메이션에 에코가 아닌 배열로 제공하는 것이 가장 좋습니다.

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*/ 

}