如何让多个动画在同一时间运行？

Question

我工作的一个循环动画，因为你可以在这里看到：http://bit.ly/blinkingEyes

我有2套动画功能，一是让眼睛眨眼和其他焕发他们两人工作的伟大独立，但在一起工作时，发光效果会中断闪烁效果。

我阅读了关于自定义队列，我相信这是答案，但我不能让它的工作没有让我的浏览器冻结。

你能帮助我了解吗？

更新：我使用jQuery 1.6

这是我的jQuery文件：

 jQuery.fx.interval = 24; 

    $(function(){ 

     /* ----------------------- #eyes1: blinking and glowing ------------------*/ 
     /* ----------------------------- (glowing is defined below) ---------------*/ 

     $('#eyes1 .eye_set1').blink({ 
            frameStop: 5, 
            endDelay: 4000, 
            frameHeight: 40, 
            frameDelay: 100, 
            framePos: 0 
            }); 

     $('#eyes1 .eye_set2').blink({ 
            frameStop: 3, 
            endDelay: 4000, 
            frameHeight: 40, 
            frameDelay: 100, 
            framePos: 0 
            }); 

     $('#eyes1 .eye_set3').blink({ 
            frameStop: 10, 
            endDelay: 5000, 
            frameHeight: 30, 
            frameDelay: 120, 
            framePos: 0 
            }); 

     /* ----------------------- #eyes2: only blinking ------------------ */ 

     $('#eyes2 .eye_set1').blink({ 
            frameStop: 5, 
            endDelay: 4000, 
            frameHeight: 40, 
            frameDelay: 100, 
            framePos: 0 
            }); 

     $('#eyes2 .eye_set2').blink({ 
            frameStop: 3, 
            endDelay: 4000, 
            frameHeight: 40, 
            frameDelay: 100, 
            framePos: 0 
            }); 

     $('#eyes2 .eye_set3').blink({ 
            frameStop: 10, 
            endDelay: 5000, 
            frameHeight: 30, 
            frameDelay: 120, 
            framePos: 0 
            }); 


/* ---- make each child of #eyes1 to glow ------ */ 

var d = 250; 
    $('#eyes1').children().each(function(){ 
      var thisDelay = Math.floor(Math.random()*1160) 
      $(this).delay(thisDelay).animateLoop({ 
           params_A: {opacity: 0.6}, 
           params_B: {opacity: 1}, 
             duration_A: 800, 
             duration_B: 800 
           }); 
     }) 

    }) 




/* ---- animateLoop: make the glowing effect ------ */ 

    $.fn.animateLoop = function(options) { 
     var defaults = { 
      params_A: {opacity: 0.6}, 
      params_B: {opacity: 1}, 
      duration_A: 800, 
      duration_B: 800 
     } 
     var options = $.extend(defaults, options) 

     var $this = this 

     function animateLoopSet() { 
       $this.animate(options.params_A, {duration:options.duration_A, easing:"easeInOutSine"}) 
        .animate(options.params_B, {duration:options.duration_B, easing:"easeInOutSine", complete: function(){animateLoopSet()} }) 
     } 

     animateLoopSet() 
     return this 
    } 



/* ---- animateLoop: make the blinking effect ------ */ 

    $.fn.blink = function(options) { 

     var defaults = { 
      frameStop: 5, 
      endDelay: 4000, 
      frameHeight: 40, 
      frameDelay: 100, 
      framePos: 0 
     } 

     var options = $.extend(defaults, options) 

     return this.each(function(){ 
     var $this = $(this) 
     var countBlink = 0; 

     function blinkSet() { 
      if(countBlink <= options.frameStop) { 
      countBlink++ 
      $this.queue(function(next){ 
           $this.delay(options.frameDelay) 
           blinkFrame(); 
           next(); 
          }) 
      .queue(function(next){ 
       blinkSet() 
       next(); 
       }) 
      } else { 
       countBlink = 0; 
       $this.queue(function(next){ 
        $this.delay(options.endDelay) 
        blinkSet() 
        next(); 
       }) 
      } 
     } 

     function blinkFrame(backword){ 
      options.framePos -= options.frameHeight 
      $this.css({backgroundPosition: '0 ' + options.framePos + 'px'}) 
      } 

     blinkSet() 
     }) 
    } 

Answer 1

jQuery的1.6已经更新到同步的动画，并提供更加平滑的动画，它应该为你做的伎俩。

从jQuery博客....

---

影响

已同步动画

在jQuery中，你可以同时运行多个动画（甚至多个在相同的元素，动画不同的属性）。在1.6版本中，我们推出了一项增强功能，可确保所有动画同步到相同的定时器间隔。这可能会造成问题，因为动画可能会略微不同步（甚至几毫秒），导致稍微“关闭”的动画。

更加平滑的动画

此外jQuery是现在使用的浏览器所提供的新的requestAnimationFrame方法，使我们的动画更加顺畅。我们可以使用此功能来避免调用定时器，而是依靠浏览器来提供最佳的动画体验。 .promise（）

就像之前的$ .ajax（）一样，$ .animate（）会得到“延迟”。 jQuery对象现在可以返回Promise，以观察集合上的所有动画何时完成：