un. Montrer, cacher
La méthode d'affichage dans jQuery est: .show () et la méthode cachée est: .hide (). Lorsqu'il n'y a pas de paramètres, il est tout simplement difficile d'afficher et de masquer le contenu.
$ ('. show'). cliquez sur (fonction () {// set les événements de déclenchement $ ('# box'). show (); // show}); $ ('. Hide'). Cliquez sur (fonction () {// set les événements de déclenchement $ ('# box'). Mide (); // Hide});Dans les méthodes .show () et .hide (), un paramètre peut être passé, ce qui contrôle la vitesse en millisecondes (1000 millisecondes équivalent à 1 seconde). Il est également riche en vitesse constante pour augmenter et diminuer, ainsi que le changement de transparence.
$ ('. show'). cliquez sur (fonction () {$ ('# box'). show (1000); // il a fallu 1 seconde pour afficher}); $ ('. Hide'). Cliquez sur (function () {$ ('# box'). Hide (1000); // il a fallu 1 seconde pour masquer});En plus d'utiliser des millisecondes directement pour contrôler la vitesse, JQuery fournit également trois chaînes de paramètres de vitesse prédéfinies: lente, normale et rapide, correspondant à 600 millisecondes, 400 millisecondes et 200 millisecondes respectivement.
$ ('# box'). show ('lent'); // 600 millisecondes $ ('# box'). Show ('normal'); // 400 millisecondes $ ('# box'). Show ('rapide'); // 200 millisecondesRemarque: Que ce soit passer des millisecondes ou passer des chaînes prédéfinies, si vous passez accidentellement une erreur ou passez une chaîne vide. Ensuite, il prendra la valeur par défaut: 400 millisecondes.
Utilisez les fonctions de rappel de .show () et .hide () pour réaliser des effets d'animation de file d'attente.
(1) appelez-vous en utilisant le nom de la fonction
$ ('. Show'). Cliquez sur (fonction () {$ ('# box'). show ('Slow', fonction showpan () {$ (this) .next (). show ('lent', showspan);});})(2) Utiliser des arguments.Callee pour appeler des fonctions anonymes
$ ('. show'). cliquez (function () {$ ('# box'). show ('Slow', function () {$ (this) .next (). show ('lent', arguments.callee);});})Lorsque nous utilisons .show () et .hide (), si nous avons besoin d'un bouton pour changer, nous devons porter des jugements conditionnels. Et jQuery nous fournit une méthode distincte avec des fonctions similaires: .toggle ().
$ ('. toggle'). cliquez sur (function () {$ (this) .toggle ('lent');});deux. Slide and Scroll jQuery fournit un ensemble de méthodes pour modifier la hauteur des éléments: .slideUp (), .slidedown () et .slidetoggle (). Comme son nom l'indique, rétrécissez vers le haut (défilement) et se développe vers le bas (diapositives).
$ ('. Down'). Cliquez sur (fonction () {// Swipe Down $ ('# box'). Slidedown ();}); $ ('. Up'). Cliquez sur (fonction () {// Swipe up $ ('# box'). Slideup ();}); $ ('.Remarque: les effets de glissement et de défilement sont les mêmes que les effets d'affichage et cachés, et ont les mêmes paramètres.
trois. S'estomper, s'estomper
JQuery fournit un ensemble de méthodes spécifiquement pour les changements de transparence: .fadein () et .fadeout (), qui représentent respectivement la fondu et se fondent respectivement, et bien sûr, il existe également une méthode de commutation automatique: .fadetoggle ().
$ ('. in'). cliquez (fonction () {// faux dans $ ('# box'). fadein ('lent');}); $ ('. out'). cliquez (function () {// faux out $ ('# box'). fadeout ('lent');}); $ ('. toggle'). Click () {// switch $ ('# #). });Les trois méthodes de transparence ci-dessus ne peuvent être que de 0 à 100, ou de 100 à 0. Si nous voulons définir la valeur spécifiée, il n'y a aucun moyen. jQuery fournit une méthode .fadeto () pour résoudre ce problème.
$ ('. toggle'). cliquez sur (fonction () {$ ('# box'). fadeto ('lent', 0,33); //0.33 signifie que la valeur est de 33%});PS: le nombre de valeurs est de 0 à 1, correspondant au pourcentage
Quatre. Animation personnalisée
JQuery fournit plusieurs aspects d'animation fixes simples et couramment utilisés que nous utilisons. Mais parfois, ces animations simples ne peuvent pas répondre à nos besoins plus complexes. À l'heure actuelle, jQuery fournit une méthode .animate () pour créer nos animations personnalisées pour répondre aux exigences plus complexes et modifiables.
$ ('. Animate'). Cliquez sur (fonction () {$ ('# box'). Animate ({'width': '300px', 'FonTSize': '50px', 'Opacity': 0.5});});Remarque: un changement CSS est un effet d'animation. Dans l'exemple ci-dessus, il y a déjà quatre changements CSS, et l'effet du mouvement synchrone d'animations multiples a été réalisé.
Il n'y a qu'un seul paramètre qui doit être passé, qui est un objet avec un style CSS de paire de valeurs clés. Il existe deux paramètres facultatifs, à savoir les fonctions de vitesse et de rappel.
$ ('. Animate'). Cliquez sur (function () {$ ('# box'). Animate ({'width': '500px', 'height': '400px',}, 2000, function () {alert ('exécution terminée');});});Jusqu'à présent, nous avons créé des animations avec des positions fixes qui sont encore. Si vous souhaitez implémenter des images de mouvement de bit dans les états de mouvement, vous devez utiliser des animations personnalisées et les combiner avec la fonction de positionnement absolu de CSS.
$ ('. Animate'). Cliquez sur (fonction () {$ ('# box'). Animate ({'top': '300px', // Le positionnement absolu de CSS doit être défini d'abord 'gauche': '200px'});});PS: l'objet de référence doit être défini en premier dans CSS et le positionnement absolu
Dans l'animation personnalisée, chaque mouvement de démarrage doit être dans la position initiale ou l'état initial, et parfois nous voulons l'animer via la position ou l'état actuel. JQuery fournit les fonctions d'ajout et de diminution des animations personnalisées.
$ ('. Animate'). Cliquez sur (fonction () {$ ('# box'). Animate ({Left: '+ = 100px', width: '+ = 100px', height: '+ = 100px'});});cinq. Méthode d'animation de file d'attente
Nous pouvons déjà implémenter l'animation de file d'attente auparavant. S'il s'agit du même élément, il peut être appelé en séquence ou concaténé. S'il s'agit d'un élément différent, vous pouvez utiliser la fonction de rappel. Mais parfois, il y a trop d'animations de file d'attente, et la lisibilité de la fonction de rappel est considérablement réduite. À cette fin, JQuery fournit un ensemble de méthodes spécialement utilisées pour les animations en file d'attente.
// connecté ne peut pas être implémenté dans la file d'attente de séquence
$ ('# box'). Slize ('Slow'). Slidedown ('Slow'). CSS ('Background', 'Orange');
Remarque: Si la méthode d'animation est animée, la ligature peut être mise en file d'attente en séquence, tandis que la méthode .css () n'est pas une méthode d'animation et sera avant la première que la file d'attente. Ensuite, la fonction de rappel de la méthode d'animation peut être utilisée pour résoudre le problème.
// Utilisez la fonction de rappel pour forcer la file d'attente la méthode .css () sur .slidedown () après $ ('# box'). Slideup ('Slow'). Slidedown ('Slow', fonction ({$ (this) .css ('background', 'orange');});Mais si c'est le cas, lorsqu'il y a beaucoup d'animations en file d'attente, la lisibilité ne diminuera pas seulement, mais la méthode d'animation originale n'est pas assez claire. Donc, notre idée est que chaque opération est sa propre méthode indépendante. Ensuite, jQuery fournit une méthode similaire à une fonction de rappel: .queue ().
// utilise la méthode .Queue () pour simuler la méthode d'animation après avoir suivi la méthode d'animation $ ('# box'). Slideup ('Slow'). Slidedown ('Slow'). Queue (fonction () {$ (this) .css ('background', 'orange');});Maintenant, nous voulons continuer à ajouter une animation cachée à la méthode .Queue (), mais nous avons constaté qu'il était impossible de l'implémenter. Ceci est causé par la fonction .Queue (). Solution: La fonction de rappel de JQuery's .Queue () peut transmettre un paramètre, qui est la fonction suivante. Appelez cette méthode suivante () à la fin pour exécuter l'animation de file d'attente.
// Utilisez le paramètre suivant pour implémenter l'animation de file d'attente d'appel continue $ ('# box'). Slideup ('Slow'). Slidedown ('Slow'). Queue (fonction (Next {$ (this) .css ('background', 'orange'); suivant ();}). Hide ('Slow');PS:. .Queue () a également une autre fonction, qui est d'obtenir la longueur de la file d'attente d'animation actuelle (non démontrée en détail)
JQuery fournit également une méthode fonctionnelle pour nettoyer les files d'attente: .Clearqueue (). Mettez-le dans une fonction de rappel en file d'attente ou de la méthode .Queue (), et les files d'attente restantes qui sont exécutées peuvent être supprimées.
// Nettoyez la file d'attente d'animation $ ('# box'). Slidedown ('Slow', function () {$ (this) .clearqueue ()}); six. Méthodes liées à l'animation
Plusieurs fois, il est nécessaire d'arrêter d'exécuter des animations, et jQuery fournit une méthode .stop () pour cela. Il a deux paramètres facultatifs: .stop (ClearQueue, Gotoend); ClearQueue passe une valeur booléenne, qui représente l'opportunité d'effacer la file d'attente d'animation non exécutée, et Gotoend représente s'il faut sauter directement l'animation exécutée au dernier état.
$ ('. Animate'). Cliquez sur (fonction () {$ ('# box'). Animate ({'Left': '300px'}, 1000); $ ('# box'). Animate ({'Top': '300px'}, 1000); $ ('# box'). $ ('# box'). Animate ({'height': '300px'}, 1000); $ ('# box'). Animate ({'height': '300px'}, 1000);}); $ ('. stop'). cliquez sur (function () {$ ('# box'). stop (true, false);});// Remarque: Le premier paramètre indique s'il faut annuler l'animation de file d'attente, la valeur par défaut est fausse. Si le paramètre est vrai, l'animation de file d'attente suivante sera annulée lorsqu'il y aura une animation de file d'attente. Le deuxième paramètre indique s'il atteint la fin de l'animation actuelle, et la valeur par défaut est fausse. Si le paramètre est vrai, il atteindra la fin immédiatement après l'arrêt. Vous pouvez le copier et en faire l'expérience vous-même.
Parfois, lors de l'exécution d'animations ou d'animations en file d'attente, il y a un retard avant le mouvement, et jQuery fournit la méthode .delay () pour cela. Cette méthode peut définir un retard avant l'animation ou l'ajouter au milieu de l'animation en file d'attente.
// Le retard de démarrage est de 1 seconde, le délai moyen est de 1 seconde. $ ('. Animate'). Cliquez sur (fonction () {$ ('# box'). Delay (1000) .animate ({'Left': '300px'}, 1000); $ ('# box'). Animate ({'Bottom': '300px'}, 1000); $ ('# #). 'width': '300px'}, 1000); $ ('# box'). Animate ({'height': '300px'}, 1000);arguments.Callee est exécuté dans quelle fonction il représente quelle fonction. Généralement utilisé dans les fonctions anonymes. Dans les fonctions anonymes, vous devez parfois vous appeler, mais parce que c'est une fonction anonyme, elle n'a pas de nom et est réglable. Pour le moment, les arguments.Callee peuvent être utilisés à la place des fonctions anonymes
// exécuter récursivement Self, Infinite Loop Exécuter $ ('# box'). Slidetoggle ('Slow', function () {$ (this) .slidetoggle ('Slow', arguments.callee);});La propriété $ .fx.off peut désactiver tous les effets d'animation.
$ .fx.off = true; // la valeur par défaut est fausse
Tous sont compris.
Ce qui précède est le partage de code d'effet d'animation jQuery qui vous est présenté par l'éditeur. J'espère que cela vous sera utile.