javascript - 使用 jQuery 添加无限循环功能并重置一系列动画

Question

function ani() {
  if(!$(':animated').length) {

    $('#img1, #img2, #img3').css({
      width: '50px',
      left: '112px',
      top: '212px',
      display: 'none',
      position: 'absolute'
    });      
    $('#img4, #img5, #img6').css({
      width: '50px',
      left: '112px',
      top: '212px',
      display: 'none',
      position: 'absolute'
    });  
    $('#img7, #img8, #img9, #img10').css({
      left: '358px';
      top: '212px',
      display: 'none',
      position: 'absolute'
    });  

    $("#img1").delay(100).fadeIn().animate({left: '+=100', top: '+=200'}, 200, ani); 
    $("#img2").delay(500).fadeIn().animate({left: '+=100', top: '+=200'}, 200, ani); 
    $("#img3").delay(1000).fadeIn().animate({left: '+=100', top: '+=200'}, 200, ani); 

    $("#img4").delay(200).fadeIn().animate({opacity: .9, top:"400px"},'fast', ani);
    $("#img5").delay(700).fadeIn().animate({opacity: .9, top:"400px"},'fast', ani);
    $("#img6").delay(1100).fadeIn().animate({opacity: .9, top:"400px"},'fast', ani);

    $("#img7").delay(100).fadeIn().animate({left: '+=-100', top: '+=200'}, 200, ani);
    $("#img8").delay(500).fadeIn().animate({left: '+=-100', top: '+=200'}, 200, ani);
    $("#img9").delay(1000).fadeIn().animate({left: '+=-100', top: '+=200'}, 200, ani);
    $("#img10").delay(1100).fadeIn().animate({left: '+=-100', top: '+=200'}, 200, ani); 
  }
};

ani();

想知道如何在 jQuery 中将动画循环无限次或定义的次数。目前上面的内容只执行一次。

它必须是相同的原始动画，而不是在屏幕下方大量进行。所以重置然后重播；用户将看到与第一次查看时一样的效果。

Answer 1

您可以使用该函数作为所有动画的回调，并始终检查 $(':animated').length。这将确保它在最后一个动画完成后运行。

您还可以在每次函数运行时重置 css:

function ani() {
  if(!$(':animated').length) {
    $('img').css({
      left: 0,
      top: 0,
      display: 'none'
    });      
    $("#img1").delay(100).fadeIn().animate({left: '+=100', top: '+=200'}, 200, ani); 
    $("#img2").delay(500).fadeIn().animate({left: '+=100', top: '+=200'}, 200, ani); 
    $("#img3").delay(1000).fadeIn().animate({left: '+=100', top: '+=200'}, 200, ani); 

    $("#img4").delay(200).fadeIn().animate({opacity: .9, top:"400px"},'fast', ani);
    $("#img5").delay(700).fadeIn().animate({opacity: .9, top:"400px"},'fast', ani);
    $("#img6").delay(1100).fadeIn().animate({opacity: .9, top:"400px"},'fast', ani);

    $("#img7").delay(100).fadeIn().animate({left: '+=-100', top: '+=200'}, 200, ani);
    $("#img8").delay(500).fadeIn().animate({left: '+=-100', top: '+=200'}, 200, ani);
    $("#img9").delay(1000).fadeIn().animate({left: '+=-100', top: '+=200'}, 200, ani);
    $("#img10").delay(1100).fadeIn().animate({left: '+=-100', top: '+=200'}, 200, ani); 
  }
};

ani();

Fiddle