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

使用jQuery在一系列动画上重置无限循环函数

1 个答案: