0

我有一些 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() 循环。还有可能会有更多类似的功能。

如果这有点模糊，非常抱歉！解释它有点麻烦。

感谢您的关注！

4

3 回答 3

0

您可以使用此处描述的动画完成回调：http: //api.jquery.com/animate/

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

我的建议是使用递归函数，把动画放在里面，动画完成后递归调用

于 2012-10-16T10:48:59.297 回答
0

你可以使用这样的东西作为模板。如果每个组中的持续时间不相同，则需要设置更多的逻辑，并且您可能最好将所有动画数据作为数组提供，而不是回显到每个动画

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

}
于 2012-10-16T12:24:07.100 回答
-1

也许解决方案是替换setTimeout为

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

现在需要做$duration * 3，因为您的动画将同时开始

于 2012-10-16T10:45:25.943 回答