Как выполнить несколько анимаций 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 одновременно

ответ

Смежные вопросы