Не вложенная последовательность анимации в jQuery?

Question

Я пытаюсь создать последовательность анимации с помощью jQuery, где одна анимация начинается после завершения предыдущей. Но я просто не могу обернуть голову вокруг этого. Я пытался использовать jQuery.queue, но я не думаю, что смогу использовать это, потому что он, кажется, имеет одну отдельную очередь для каждого элемента в массиве jQuery.

Мне нужно что-то вроде:

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

Есть ли способ сделать это с помощью jQuery, или мне приходится писать и обрабатывать свою очередь вручную?

Answer 1

Вы можете сделать пользовательский .queue(), чтобы избежать неограниченного вложения ..

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

Спасибо всем, кто отвечает!

Я подумал, что должен поделиться результатом моего вопроса.Вот простой плагин 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));

Не очень хороший тест, но в любом случае.

Наслаждайтесь !!

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);
});

РЕДАКТИРОВАТЬ: добавлен параметр скорости

Answer 5

Вы можете вызвать следующий рекурсивно.

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

animate(0);