Question

我想我对jQuery足够了解让我遇到麻烦。我有三个连续的动画，我很高兴。但现在需要它们按顺序运行并重复。我不确定排队或settimeout。我想我只需要重写并结合但不确定最好的方法。将我的代码简化为JSFIDDLE。

$(document).ready(function() {
   var $pulse = $('.a');
   function runIt() {
      $pulse.animate({margin:"0 0 0 150px",opacity:"1"}, 1100)
      .animate({margin: "100px 0 0 150px",opacity:"0"}, 1400, 
      function() {
         $pulse.removeAttr("style");
         runIt();
      });
   }
   runIt();
});

//

$(document).ready(function() {
   var $pulse = $('.b');
   function runIt() {
      $pulse.animate({margin:"100px 0 0 150px",opacity:"1"}, 1100)
      .animate({margin: "200px 0 0 150px",opacity:"0"}, 1400, 
      function(){$pulse.removeAttr("style");
         runIt();
       });
   }
   runIt();
});

//

$(document).ready(function() {
   var $pulse = $('.c');
   function runIt() {
      $pulse.animate({margin:"200px 0 0 150px",opacity:"1"}, 1100)
         .animate({margin: "300px 0 0 150px",opacity:"0"}, 1400,
         function(){$pulse.removeAttr("style");
         runIt();
      });
   }
   runIt();
});

JSFIDDLE

Answer 1

有了这个：

$(document).ready(function() {
    var $pulse1 = $('.a'), $pulse2 = $('.b'), $pulse3 = $('.c');

    function runIt1() {
        $pulse1.animate({margin:"0 0 0 150px",opacity:"1"}, 1100)
        .animate({margin: "100px 0 0 150px",opacity:"0"}, 1400, function(){
            $pulse1.removeAttr("style");
            runIt2();
        });
    }    

    function runIt2() {
        $pulse2.animate({margin:"100px 0 0 150px",opacity:"1"}, 1100)
        .animate({margin: "200px 0 0 150px",opacity:"0"}, 1400, function(){
            $pulse2.removeAttr("style");
            runIt3();
        });
    }
    function runIt3() {
        $pulse3.animate({margin:"200px 0 0 150px",opacity:"1"}, 1100)
        .animate({margin: "300px 0 0 150px",opacity:"0"}, 1400, function(){
            $pulse3.removeAttr("style");
            runIt1();
        });
    }    
    runIt1();
});

在此工作：http://jsfiddle.net/edgarinvillegas/ntxsS/1/

来自玻利维亚拉巴斯的欢呼声

队列分离连续动画并按顺序运行而不是重复

1 个答案: