6
votes

Une séquence d'animation non imbriquée en jQuery?

J'essaie de créer une séquence d'animation avec jQuery où une animation commence après la fin du précédent. Mais je ne peux tout simplement pas envelopper la tête autour de ça. J'ai essayé de faire usage de la jquery.Queue, mais je ne pense pas pouvoir utiliser cela parce qu'il semble avoir une file d'attente individuelle pour chaque élément du tableau JQuery.

J'ai besoin de quelque chose comme: xxx

Y a-t-il une façon JQuery de faire cela ou dois-je écrire manuellement et gérer ma propre attente?

javascript jquery sequence animation queue

0 commentaires

5 Réponses :

2
votes

Le rappel de .animate () accepte réellement un autre .animate (), donc tout ce que vous deviez faire serait xxx

et ainsi de suite.

2 commentaires

+1 C'est la façon standard de chaînonner des animations. Très simple.

Mais vous ne pouvez pas faire cela dans une boucle. Notez le 'chacun'!

1
votes

Vous pouvez appeler la suivante récursivement.

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

animate(0);

0 commentaires

1
votes

Pourquoi ne pas construire une file d'attente? XXX

EDIT: Ajout de la vitesse param

1 commentaires

Est-ce fiable? Êtes-vous sûr que la première animation sera faite à cette époque?

18
votes

Vous pouvez créer une personnalisation .Queue () code> pour éviter l'imbrication illimitée ..

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

0 commentaires

1
votes

Merci à tout le monde qui répond!

Je pensais que je devrais partager le résultat de ma question. Voici un simple plug-in jquy Stritownallallall qui glisse un élément à la fois plutôt que tout à la fois. P>

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

0 commentaires