Introduction aux effets jQuery
jQuery est l'une des bibliothèques javascript les plus populaires qui est conçue pour simplifier le DOM HTML, c'est-à-dire les propriétés du modèle d'objet de document telles que la manipulation et la traversée d'arbre. D'autres propriétés telles que la gestion des événements, Ajax et l'animation CSS sont également simplifiées. Il s'agit d'une bibliothèque open source et gratuite qui est généralement utilisée dans 73% des 10 millions de sites Web qui sont utilisés aujourd'hui. Les fonctionnalités principales de jQuery incluent les sélecteurs basés sur les éléments DOM, la manipulation et la traversée qui rendent le travail sur jQuery beaucoup plus facile et pratique. Dans cette rubrique, nous allons découvrir les effets jQuery.
Il est utilisé pour fournir une interface très simple permettant de réaliser différents types d'effets étonnants. Ces méthodes permettent d'utiliser et d'appliquer rapidement les fonctionnalités-effets les plus couramment utilisés ainsi que les configurations nues au minimum. La commande pour afficher et masquer les éléments est à peu près la même que ce que toute personne désireuse de les voir attendrait. La commande Show () est utilisée pour afficher les éléments dans un ensemble entièrement enveloppé et la commande hide () est utilisée pour les masquer.
Différentes méthodes d'effet jQuery:
Nous discutons ici de différents types de méthodes d'effet jQuery
1) Animer ()
La méthode animate est utilisée pour effectuer une animation basée sur un ensemble de propriétés CSS. Cette méthode est utilisée pour changer l'état de l'élément d'un état à un autre avec les styles CSS. La valeur de la propriété est modifiée progressivement de sorte qu'un effet animé peut être obtenu. La chose à noter est que seules les valeurs numériques peuvent être animées telles que la marge: 40px. En revanche, les valeurs des chaînes ne peuvent pas être animées telles que la couleur d'arrière-plan: vert. Cela vient à nouveau avec une exception pour les chaînes comme le show, hide et toggle.
Syntaxe
(selector).animate((styles), duration, easing, callback)
Exemple
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Délai ()
Comme son nom l'indique, celui-ci est utilisé pour définir le délai pour toutes les fonctions qui sont mises en file d'attente sur les éléments sélectionnés.
Syntaxe
$(selector).delay(duration, NameOfQueue)
Exemple
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Cette fonction permet de basculer entre les fonctions de fondu d'entrée et de sortie sur différentes cases. Si un élément disparaît progressivement, cette fonction fadeToggle () peut être utilisée pour les faire apparaître en fondu. Les éléments qui sont sous la forme masquée ne seront pas affichés dans le cadre de cette méthode.
Syntaxe
$(selector).fadeToggle(duration, easing, callback)
Exemple
$("label").click(func()(
$("#box").fadeToggle();
));
4) fondu ()
Cette méthode est utilisée pour modifier l'opacité de tous les
c'est-à-dire les éléments liés au paragraphe progressivement. L'opacité spécifiée dans ce contexte se réfère à l'opacité de l'effet changeant.
Syntaxe
$(selector).fadeTo(duration, opacity, easing, callback)
Exemple
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Cette méthode est la même que celle suggérée par le nom. Ceci est utilisé pour effacer la file d'attente et supprime tous les éléments de la file d'attente qui n'ont pas été exécutés. La fonction terminera son exécution une fois qu'elle aura commencé à s'exécuter. Ceci est lié à deux méthodes à savoir. queue () et dequeue ().
Syntaxe
$(selector).clearQueue(NameOfQueue)
Exemple
$("label").click(func()(
$("box").clearQueue();
));
6) finition ()
Cette méthode dans jQuery est utilisée pour terminer ou terminer l'animateur en cours d'exécution car elle est utilisée pour arrêter toutes les animations en cours d'exécution et est utilisée pour supprimer toutes les animations en file d'attente. Il est également utilisé pour compléter toutes les animations pour une gamme variée d'éléments sélectionnés. Cette méthode est similaire à des méthodes telles que .stop qui a les deux vrais paramètres. La principale différence entre cette méthode et finish est que la méthode finish est utilisée pour arrêter et mettre en pause les types de propriétés des éléments CSS de toutes les animations en file d'attente.
Syntaxe
$(selector).finish(NameOfQueue)
Exemple
$("#complete").click(func()(
$("div1").finish();
));
7) retirer la file d'attente ()
Cette méthode est utilisée pour supprimer la fonction suivante de la file d'attente et est ensuite utilisée pour exécuter la fonction. Une file d'attente est une ou plusieurs fonctions en attente d'exécution dans le pipeline. Cette méthode de mise en file d'attente est utilisée avec la méthode de file d'attente. Un élément peut avoir plusieurs files d'attente. La file d'attente fx est la plus courante qui est également la file d'attente par défaut.
Syntaxe
$(selector).dequeue(NameOfQueue)
Exemple
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Ceci est une autre méthode utile dans jQuery qui est utilisée pour faire glisser vers le bas ou afficher les listes d'éléments sélectionnées. Le point à noter ici est qu'il fonctionne également sur les éléments au format caché et que le type d'affichage est affiché comme nul dans le cas de CSS mais la visibilité ne devra pas être cachée.
Syntaxe
$(selector). slideDown (duration, easing, callback)
Exemple
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
La méthode slideUp () est utilisée pour masquer tous les
éléments sélectionnés. Les éléments qui sont dans la forme cachée ne seront pas affichés du tout. Par conséquent, cela n'affecte pas la mise en page de la page.
Syntaxe
$(selector).slideUp(duration, easing, callback)
Exemple
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
Contrairement à la méthode slideUp (), cette méthode est utilisée pour afficher tous les
éléments. Cette méthode slidedown () fonctionne sur tous les éléments qui sont également liés aux méthodes cachées dans le cas des méthodes jQuery et le nom est également affiché dans le CSS mais la visibilité n'est pas cachée.
Syntaxe
$(selector).slideDown(duration, easing, callback)
Exemple
$("label").queue(func()(
$("p").slideDown();
));
11) Basculer ()
Cette méthode est utilisée pour basculer entre afficher et masquer divers
éléments basés. Cette méthode est utilisée pour vérifier la visibilité des éléments. La méthode show () est utilisée pour s'exécuter même lorsque l'élément est masqué. Hide () est exécuté même lorsque l'élément est visible. Les méthodes d'affichage et de masquage combinées créent un effet de bascule et donc la méthode toggle ().
Syntaxe
$(selector).toggle(duration, easing, callback)
Exemple
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Cette méthode est utilisée pour basculer entre les fonctions slideUp () et slideDown () pour tous les éléments basés sur le paragraphe. Cette méthode permet de vérifier la visibilité des éléments sélectionnés. SlideDown () est la fonction qui peut être vue en cours d'exécution lorsque l'élément est masqué. En revanche, l'élément slideUp () est celui qui doit être exécuté si l'élément est visible.
Syntaxe
$(selector).slideToggle(duration, easing, callback)
Exemple
$("label").queue(func()(
$("p").slideToggle();
));
jQuery nous permet d'ajouter les effets sur la page Web en fournissant de nombreuses quantités de fonctions qui peuvent être placées sur différents sélecteurs. C'est à vous de voir comment vous souhaitez rendre vos sites Web plus remplis d'effets. J'espère que vous avez aimé notre article. Restez à l'écoute sur notre blog pour plus d'articles comme ceux-ci.
Articles recommandés
Ceci est un guide des effets jQuery. Ici, nous avons discuté des différents types de méthodes d'effets jQuery avec la syntaxe et l'exemple. Vous pouvez également consulter l'article suivant pour en savoir plus -
- Utilisations de JQuery
- Alternatives à jQuery
- Commandes de requête MySQL
- Qu'est-ce que la procédure en SQL?
- jQuery querySelector