如何讓多個動畫在同一時間運行？

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，以觀察集合上的所有動畫何時完成：