File d’attente d’effet dans JQuery

Dans le manuel de JQuery, nous avons déjà traité à divers articles d’effets de JQuery. En fait, c’est déjà le quatrième article que nous voulions traiter les différentes manières de créer des effets sur ce cadre JavaScript. À ce jour, nous avons publié les clés de la création d’effets simples, la méthode d’animation polyvalente () pour effectuer l’animation d’attributs numériques CSS, ou les fonctions de créer des effets fondues.

Toutes ces méthodes décrites ci-dessus et d’autres que nous n’avons pas encore examiné comme SLeceUp () ou SLEDDOWN (), qui fonctionnent de la même manière que les méthodes de Fadein () ou de FADEOUT () déjà observées (), Servir pour effectuer des effets variés sur les pages Web et sont aussi simples à utiliser comment les invoquer sur l’objet JQuery contenant l’élément que nous souhaitons encourager. Maintenant que nous avons déjà surmonté cette première étape et que nous connaissons déjà toute une gamme d’effets simples, nous apprendrons à la chaîne plusieurs effets à l’exécuter l’une après l’autre.

Nous verrons dans cet article et plusieurs arriver, ces effets de chaînage sont aussi simples que d’appeler toutes les méthodes d’effet que nous voulons faire. Toutes ces méthodes seront automatiquement incluses dans une file d’attente et seront exécutées l’une après l’autre, sans avoir à faire quoi que ce soit à la nôtre, à part la propre invocation des méthodes.

Fonctions d’effet

Nous allons répéter le long des articles suivants un concept que je veux expliquer pour savoir ce que nous faisons référence à. Ce sont les « fonctions d’effets » qui sont celles disponibles par JQuery pour créer des effets spéciaux sur les pages Web. Comme nous l’avons dit, dans divers articles précédents, des effets de diverses fonctions d’effets disponibles ont déjà été expliqués et montrés.

Les fonctions d’effets sont les méthodes de jQuery qui modifient les éléments de la page adoucie, c’est dire , qui modifient progressivement les propriétés d’un ou de plusieurs éléments, dans une animation au fil du temps.

Par exemple, nous avons la méthode FADEOUT (), qui effectue un effet d’opacité sur un ou plusieurs éléments, les faisant disparaître de la page avec un fondeur opaque transparent. La méthode complémentaire Fadein () fait un effet coulant similaire, mais transparent à opaque. Comme ceux-ci, nous avons de nombreuses méthodes d’effets supplémentaires en jQuery tels que Animate (), SLICEUP () et tranches (), etc. Dans la documentation du cadre, dans les effets de la section de la référence de l’API, nous pouvons voir une liste complète de ces fonctions d’effets.

Dans ce manuel de jQuery, nous avons déjà vu plusieurs exemples sur ces fonctions d’effets et le long des articles suivants que nous publierons dans le développementweb .com, nous verrons divers autres applications d’échantillons où nous pouvons continuer à apprendre.

File d’attente d’effets par défaut

Lorsque nous invoquons plusieurs fonctions d’effets de celles disponibles dans JQuery, elles sont entrées dans une file d’attente d’effet par défaut, appelée « FX ». Chaque élément de la page a sa propre file d’attente d’effets par défaut et fonctionne automatiquement. En invoquant les effets, ils se mettent dans la file d’attente et fonctionnent automatiquement, l’une après l’autre, avec l’ordre dans lequel ils ont été invoqués.

couche = $ (« # micapa »); couche. Fadeout ();
couche.fadein ();
couche.slideUp ();
Layer.slitown ();

Les effets fonctionne, l’une après l’autre, sont invoqués dans un instant, mais ils ne le font pas Courez tout à la fois, mais il devrait terminer le précédent avant de commencer la suivante. Heureusement, JQuery fait tout seul pour gérer cette file d’attente.

Comme on dit, chaque élément de la page a sa propre file d’attente d’effets et, bien que nous puissions même créer d’autres files d’attente d’effets pour le même élément, dans la plupart des cas, nous en aurons assez avec la file d’attente par défaut déjà mise en œuvre.

Exemple d’exécution des effets dans la file d’attente par défaut de JQuery

Nous lancerons plusieurs effets sur une couche et nous verrons comme eux-mêmes qu’ils sont eux-mêmes Exécuté dans l’ordre, comme nous les invoquions.

Nous aurons un élément div, comme celui-ci:

< div > cette couche qui va être animée, dans une boucle infinie … < / div> / div> / div> « 8fed73fe62 »>

Maintenant, nous pouvons voir une fonction qui effectue l’invocation à divers effets de JQuery:

fonction assise ()> « Taille de police »: « 1.5em »
}, 2000); couche.hide (1000); couche.show (1000); layo.animate ({
« GAUCHE » : « 350px », aut « : » 50px « 
}, 1500);
cape.animate ({
 » Font-Taille « : » 0.75em « 
}, 2000 ); Couche.Animate ({
« GAUCHE »: « 100PX », « TOP »: « 20PX »
}, 1500, COLLATEFECTS);
}

devrait être corrigé que le dernier de la Les fonctions d’effet invoquées appellent un appel à cette même fonction, au moyen d’un rappel, alors lorsque tous les effets sont terminés, il sera invoqué à nouveau et il y aura une boucle infinie, où il se réparera tout le temps de la même manière. Séquence d’effets.

et maintenant, nous pouvons commencer cette fonction lorsque la page est prête:

$ (document) .Readady (fonction (fonction () { Colatefects () ;
});

Le résultat de l’exercice complet peut être vu sur une page séparée.

Avec cela, nous avons fait notre premier exemple de file d’attente d’effets. Cela a été facile, non? Mais bien sûr, d’ici, la chose peut compliquer tout ce que nous voulons, ou nous avons besoin. Dans le prochain article, nous commencerons à expliquer les modes existants de JQuery pour modifier les files d’attente des effets, de faire des choses comme les arrêts, d’analyser, de charger des fonctions d’autres types à exécuter sur la file d’attente, etc.

Leave a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *