À l'aide de jQuery.la file d'attente avec de multiples animations d'éléments?

jQuery file d'attente sont très ennuyeux - je ne peux pas obtenir ma tête autour de lui...

La fonction suivante contient 4 animations qui je veux passer un après les autres (pas en même temps).

function startupAnime() {

    $("#header").animate({"opacity":"1"},{duration:3000, queue:"global"});
    $("#header").animate({"top":"0px"},{duration:3000, queue:"global"});
    &("#loader").animate({"opacity":"0"},{duration:3000, queue:"global"});
    $("#background").animate({"background-position" : "300px center"},{duration:3000, queue:"global"});
}

$(window).load(function() { 

    startupAnime();
})

Les deux éléments d'en-tête animer un après l'autre, mais le reste, tout se fait en même temps.

J'ai alors découvert la File d'attente ne fonctionne que si votre animer le même élément!! Ce n'est pas très utile...
Mais l'ajout de file d'attente:"nom" est apparemment censé faire le lien entre eux dans la même file d'attente... bien que cela s'arrête de travailler pour moi.

Suis-je manqué quelque chose? Je ne suis pas sûr si la file d'attente signifie "à côté de l'animation commencera lorsque celui-ci est fini", ou "ces animations sont organisées dans une file d'attente en attente pour vous de les libérer" par peut-être l'appel de file d'attente("global") ou quelque chose!?

La plupart des suggestions de parler de l'animation d'un élément, ou la mise en place de nombreuses fonctions et l'utilisation de rappel à "itérer" à travers les fonctions - pas très propre, si vous me demandez. Je veux simplement être en mesure d'exécuter une liste des animations à chaque fois que je demande pour cela.

NB: UNE "liste" des animations pourraient animer les éléments un à un, mais j'ai aussi deux ou plusieurs éléments à animer en même temps à un certain point dans la liste. Voici un exemple:

animate element A
-> then ->
animate element B
-> then ->
animate element C and D together
-> then ->
animate element E

Utilisez le rappel de la deuxième en-tête #animation pour démarrer la 3ème. Ce n'est pas propre par votre définition, mais ce n'est en utilisant une mesure de la file d'attente ou en différé, des objets qui sont les solutions de rechange.
double possible de Comment puis-je animer plusieurs éléments de manière séquentielle à l'aide de jQuery?

OriginalL'auteur Patrick Keane | 2013-08-28

Vous avez beaucoup d'options, mais voici ce que je voudrais faire (parce que j'aime l'auto-explicatifs de la syntaxe):

$.when(
    $("#header").animate({opacity: 1}, 3000).promise(),
    $("#header").animate({top: 0}, 3000).promise()
).done(function() {
    $("#loader").animate({opacity: 0}, 3000).promise()
    .done(function() {
        $("#background").animate({"background-position" : "300px center"}, 3000)
    })
})

Démo: http://jsfiddle.net/vjazX/

cela ne fonctionne pas pour grand projet

OriginalL'auteur David Hellsing

3

Vous avez un peu d'options.

Retard:
```
$("#loader").delay(6000).animate({"opacity":"0"},{duration:3000});
$("#background").delay(9000).animate({"background-position" : "300px center"},{duration:3000});
```
Utiliser les rappels:
```
function startupAnime() {

    $("#header").animate({"opacity":"1"},3000);
    $("#header").animate({"top":"0px"},3000,function(){
        $("#loader").animate({"opacity":"0"},3000,function(){
            $("#background").animate({"background-position" : "300px center"},3000);
        });
    });   

}
```
ou de l'utilisation différée des objets:
```
function startupAnime() {

    $("#header").animate({"opacity":"1"},3000);
    $("#header").animate({"top":"0px"},3000).promise().done(function(){
        $("#loader").animate({"opacity":"0"},3000).promise().done(function(){
            $("#background").animate({"background-position" : "300px center"},3000);
        });
    });   

}
```
Un autre différés option d'objet:
```
function startupAnime() {

    $("#header").animate({"opacity":"1"},3000);
    $("#header").animate({"top":"0px"},3000).promise().then(function(){
        return $("#loader").animate({"opacity":"0"},3000).promise();
    }).done(function(){
        $("#background").animate({"background-position" : "300px center"},3000);
    });

}  
```
Je ne vais même pas poster la coutume des files d'attente parce que c'est juste ridicule.

Aucun d'entre eux sont vraiment très propre. Choisissez votre poison. L' .delay() semble le plus propre à moi, mais peut-être moins facile à gérer. Bien que les alternatives ne sont pas que facile à gérer.

Si je devais, je voudrais utiliser le 2ème différée objet de l'échantillon parce que je ne me sens pas à l'aise avec le retard et la haine de la pyramide de doom.

delay semble plus propre, mais les rappels sont plus fiables. Vous pouvez nettoyer un peu de code en utilisant une autre syntaxe: $("#header").animate({top:0}, 3000, function() { ....
Merci, mis à jour. c'est un peu plus propre.
les rappels sont bien, mais si vous avez conditionnelle des animations (par exemple, l'appel des animations sur un objet avec un .not() mise en garde), mais veulent s'assurer ultérieure des animations sont-ils exécutés? si ils sont dans le rappel et la .not() s'applique qu'ils ne seront pas - été d'essayer d'envelopper ma tête autour de ce... est-ce que ce sont les promesses?
Je ne comprends pas très bien le scénario que vous venez de décrire

OriginalL'auteur Kevin B
0

Essayez d'utiliser jQuery promesse de l'API. Vous pouvez tirer la promesse de chaque élément jQuery et puis attacher un fait de rappel.

Par exemple,
```
$("#header").animate({"opacity":"1"},{duration:3000 }).promise().done(function () {
    $("#header").animate({ "top":"0px" },{ duration:3000 });
});
```
Vous pouvez vous référer à jQuery promesse de l'API pour plus d'informations. http://api.jquery.com/promise/

OriginalL'auteur Tmax6

Vous devez vous connecter pour publier un commentaire.