Effets jQuery | Expliqué

JQuery (si vous ne le connaissez pas déjà) est une bibliothèque JavaScript qui contient des fonctionnalités couramment utilisées d'une page Web enveloppée dans différentes fonctions. Fournissant ainsi une interface économe en temps pour le développeur Web. JQuery fournit également une interface de réduction du temps pour créer des animations et des effets de transition sans configuration proche (la plupart des fonctions prennent 2 arguments chez Max). JQuery contient différents types de fonctions, y compris les sélecteurs, les événements et les effets. Dans cet article, nous allons discuter de divers types d'effets fournis par JQuery, leur syntaxe ainsi que leur exemple

Configuration de HTML et incluant jQuery

Pour commencer à utiliser jQuery dans votre projet, vous devez l'inclure à l'intérieur de la balise de script, nous utilisons le jQuery hébergé Google avec la ligne suivante:

Une fois cette ligne ajoutée au fichier HTML, nous pouvons commencer à écrire le code jQuery

La méthode animate ()

La méthode animée offerte par jQuery est utilisée pour créer une animation très basique mais pourtant attrayante sur votre page Web. Cette fonction prend trois arguments:

• Un paramètre requis qui est le animation
• UN vitesse Paramètre (facultatif) qui définit la vitesse de l'animation
• UN rappeler(paramètre facultatif) qui, comme le nom, est la fonction de rappel

Syntaxe de la méthode animate ()

La syntaxe est assez simple comme déjà expliqué ci-dessus

[jQuerry_Selector $ ()].animate (paramètre, animation_speed, callback_function);

Pour démontrer cela, nous allons créer un bouton et un div dans notre fichier HTML en utilisant les lignes suivantes:

Bonjour! Je suis Linuxbot
Cliquez sur moi!

Cela nous donnera le résultat suivant sur votre navigateur:

Pour le code jQuery, nous allons tourner l'opacité du div jusqu'à 0.7 Mais nous allons le faire en 2 secondes en utilisant les lignes de code suivantes:

$ ("bouton").cliquez sur (fonction ()
$ ("div: dernier").animer(

Opacité: "0.5 ",
,
2000
));
);

Comme vous pouvez le remarquer, nous avons enveloppé le animer Méthode dans un Cliquez sur Méthode de l'événement pour que notre animation ne soit invoquée que lorsque nous cliquez sur le bouton. En appuyant sur le bouton, nous obtenons le résultat suivant:

Comme vous pouvez le voir, nous avons pu animer l'opacité en utilisant la méthode animée.

La méthode show () et hide ()

Ces méthodes sont utilisées pour afficher et masquer les éléments d'une page Web, la syntaxe de ces deux fonctions est presque identique à:

[jQuerry_Selector $ ()].show (animation_speed, callback_function);
[jQuerry_Selector $ ()].hide (animation_speed, callback_function);

Pour démontrer cela, saisissez les lignes suivantes dans notre fichier HTML:

Je peux disparaître et réapparaître
Cacher
Montrer

Vous verrez la page Web suivante sur votre navigateur Web:

Comme vous pouvez le voir, nous avons un div avec du texte à l'intérieur avec deux boutons qui les utiliseront cacher et montrer Animations respectivement.

Pour la pièce jQuery, utilisez les lignes de code suivantes dans votre fichier javascript:

$ ("# Show").cliquez sur (fonction ()
$ ("# démo").show (2000);
);
$ ("# hide").cliquez sur (fonction ()
$ ("# démo").Hide (2000);
);

Avis: Nous avons passé le temps de 2 secondes, sinon le changement sera instantané et nous n'aurons pas d'effet d'animation comme une animation.

Exécutez le fichier et cliquez sur le bouton Masquer et vous obtiendrez le résultat suivant:

Comme vous pouvez le voir, nous obtenons une animation attrayante, l'étape suivante consiste à tester l'animation de l'émission en cliquant sur le bouton Afficher. Alors, cliquez sur le bouton Afficher et vous obtiendrez les résultats suivants:

Comme vous pouvez le voir, nous obtenons une animation un peu unis en douceur

La méthode Slide ():

Nous pouvons également obtenir une transition de diapositive en douceur avec la bibliothèque jQuery. Nous obtenons trois fonctions pour l'animation de diapositive, ce sont à savoir:

• glisser vers le haut()
• glisse vers le bas()
• slidetoggle ()

Pour démontrer cela, nous allons implémenter une méthode slidetoggle (), utilisez les lignes suivantes dans le fichier html:

Je peux disparaître et réapparaître


Cliquez sur moi pour basculer la diapositive

Pour le code jQuery, utilisez les lignes suivantes dans le fichier JavaScript:

$ ("# toggle").cliquez sur (fonction ()
$ ("# démo").slidetoggle ("lent");
);

Vous obtenez le résultat suivant à l'écran:

Comme vous pouvez le voir, nous avons une animation à bascule de diapositive rapide et lisse en utilisant jQuery. En dehors de ceux-ci, JQuery fournit tout un tas d'autres méthodes d'animation que vous pouvez essayer.

Conclusion

JQuery est livré avec des effets attractifs et des méthodes d'animation qui font vraiment ressortir une page Web. JQuery se concentre sur la création de différentes méthodes, sélecteurs et animation concise pour le développeur Web. C'est pourquoi certaines des animations les plus couramment utilisées sont enveloppées dans différentes fonctions qui peuvent être invoquées chaque fois que l'utilisateur le souhaite. Aujourd'hui, dans cet article, nous avons expliqué comment utiliser jQuery pour implémenter certaines des effets d'animations sur notre page Web.