jQuery에서 중첩되지 않은 애니메이션 시퀀스?

Question

jQuery를 사용하여 애니메이션 시퀀스를 만들려고합니다. 이전 애니메이션이 끝난 후에 하나의 애니메이션이 시작됩니다. 그러나 나는 그저 내 머리를 감쌀 수 없다. jQuery.queue를 사용하려고했지만 jQuery 배열의 각 요소에 대해 하나의 큐가있는 것 같아서 사용할 수 없다고 생각합니다. 이 작업을 수행 할 수있는의 jQuery 방법이 있나요

$('li.some').each(function(){ 
    // Add to queue 
    $(this).animate({ width: '+=100' }, 'fast', function(){ 
     // Remove from queue 
     // Start next animation 
    }); 
}); 

또는 I 작성하고 수동으로 자신의 큐를 처리해야합니까 :

내가 좋아하는 뭔가가 필요?

Answer 1

..

var q = $({}); 

function animToQueue(theQueue, selector, animationprops) { 
    theQueue.queue(function(next) { 
     $(selector).animate(animationprops, next); 
    }); 
} 

// usage 
animToQueue(q, '#first', {width: '+=100'}); 
animToQueue(q, '#second', {height: '+=100'}); 
animToQueue(q, '#second', {width: '-=50'}); 
animToQueue(q, '#first', {height: '-=50'}); 

데모 온 http://jsfiddle.net/gaby/qDbRm/2/

---

하면,에서 반면에, 당신은 여러 요소에 대해 동일한 애니메이션을 수행하기를 원합니다. 모두가 회신에 다음 이전의 모든 것들의 기간 동안 .delay() 각 요소의 애니메이션을 자신의 인덱스를 사용할 수있는 다른 후 전자 ..

$('li.some').each(function(idx){ 
    var duration = 500; 
    $(this).delay(duration*idx).animate({ width: '+=100' }, duration); 
}); 

데모 http://jsfiddle.net/gaby/qDbRm/3/

Answer 2

.animate의 콜백()는 실제로 다른 .animate(), 그래서 당신이해야 할 것 모두가 등등

$(this).animate({ width: '+=100' }, 'fast', function(){ 
     $(selector).animate({attr: val}, 'speed', function(){ 
}); 
    }); 

및 것을 받아들입니다.

Answer 3

다음 호출을 재귀 적으로 호출 할 수 있습니다.

function animate(item) { 
    var elem = $('li.some').eq(item); 
    if(elem.length) { 
     elem.animate({ width: '+=100' }, 'fast', function() { 
      animate(item + 1); 
     }); 
    } 
} 

animate(0); 

Answer 4

왜 대기열을 구축하지 않습니까?

var interval = 0; //time for each animation 
var speed = 200; 

$('li.some').each(function(){ 
    interval++; 
    $(this).delay(interval * speed).animate({ width: '+=100' }, speed); 
}); 

편집 : 추가 속도 PARAM

당신은 무제한 중첩을 피하기 위해 사용자 정의 .queue()을 할 수

Answer 5

에 감사합니다!

나는 내 질문의 결과를 공유해야한다고 생각했습니다. 한 번에 한 항목 씩 슬라이드하는 간단한 jQuery slideDownAll 플러그인이 있습니다.

(function ($) { 

    'use strict'; 

    $.fn.slideDownAll = function (duration, callback) { 

     var that = this, size = this.length, animationQueue = $({}); 

     var addToAnimationQueue = function (element, duration, easing, callback) { 
      animationQueue.queue(function (next) { 
       $(element).slideDown(duration, easing, function() { 
        if (typeof callback === 'function') { 
         callback.call(this); 
        } 
        next(); 
       }); 
      }); 
     }; 

     return this.each(function (index) { 
      var complete = null, 
       easing = 'linear'; 
      if (index + 1 === size) { 
       complete = callback; 
       easing = 'swing'; 
      } 
      addToAnimationQueue(this, duration/size, easing, complete); 
     }); 
    }; 

} (jQuery)); 

어쨌든 테스트는 좋지 않습니다.

Enjoy !!