如何同時執行多個jquery動畫

假設我有兩個自定義的動畫函數，它們由原生jquery動畫函數組成：一個是搖動函數，從左到右搖動並在無限循環中迴轉：如何同時執行多個jquery動畫

var leftright = function (el) { 
       var duration = 800; 
       var interval = duration * 4; 
       var shake = function() { 
        el.animate({'left': '-=15' }, duration) 
         .animate({'left': '+=15' }, duration) 
         .animate({'left': '+=15' }, duration) 
         .animate({'left': '-=15' }, duration) 
       } 

       shake(); 
       setInterval(function() { 
        shake(); 
       }, interval) 
      }

然後我定義了一個閃光動畫功能閃光燈所有的時間：

var flash = function (el) { 
     var duration = 300; 
     var interval = duration * 2; 
     var f = function() { 
      el.animate({'opacity': 0}, duration) 
       .animate({'opacity': 1}, duration)      
     } 
     f(); 
     setInterval(function() { 
      f(); 
     }, interval) 
    }

我想要的元素在同一時間執行兩個動畫，所以我用隊列：

  var que = $({}); 
      que.queue('leftright', function() { 
       leftright($('#el'));  
      }).dequeue('leftright'); 

      que.queue('flash', function() { 
       flash($('#el'));  
      }).dequeue('flash');

但他們還是第一次執行抖動，然後執行閃光燈

我怎樣才能在同一時間執行它們？

以下是演示：http://jsfiddle.net/hh54188/SykMu/

來源

2012-06-28 hh54188

我瞭解這樣做會改變閃光燈的頻率，但是你是否考慮過將這些功能合併爲一個？ http://jsfiddle.net/SykMu/1/我很感興趣的是如何按照你設置的方式來完成這件事，儘管我會繼續玩弄它。 – eivers88

@ eivers88：在這種情況下，你給我的演示是我想要的，但是如果每個我都有不同的效果需要組合在一起，我需要精確地計算它們，我需要在每秒中計算出css狀態。我只寫了一些效果函數，將目標元素傳遞給它們，效果可以一起執行。 – hh54188

我不確定在查看http://api.jquery.com/animate/doc和其他資源之後如何完成此操作，但我看到要同時爲同一元素同時動畫多個屬性的唯一方法是將它們設置在相同的'.animate（）'函數中。祝你好運，但請發佈解決方案，如果你發現這是一個很好的問題。 – eivers88

可能... http://jsfiddle.net/u7bgs

，而不是這個js：

var que = $({}); 
que.queue('leftright', function() { 
    leftright($('#el'));  
}).dequeue('leftright'); 

que.queue('flash', function() { 
    flash($('#el'));  
}).dequeue('flash');

嘗試一下：

$('#parent').wrap("<div class='wrapper'></div>"); 
leftright($('.wrapper:has(#parent)')); 

flash($('#parent'));

來源

2012-06-29 17:35:20 see613

如何同時執行多個jquery動畫

回答

相關問題