jQuery - Effets

jQuery fournit une interface très simple pour réaliser divers types d'effets étonnants. Les méthodes jQuery nous permettent d'appliquer rapidement les effets couramment utilisés avec une configuration minimale. Ce tutoriel couvre toutes les méthodes jQuery importantes pour créer des effets visuels.

Affichage et masquage des éléments

Les commandes pour afficher et masquer des éléments sont à peu près ce à quoi nous nous attendrions - show() pour montrer les éléments dans un ensemble enveloppé et hide() pour les cacher.

Syntaxe

Voici la syntaxe simple pour show() méthode -

[selector].show( speed, [callback] );

Voici la description de tous les paramètres -

  • speed - Une chaîne représentant l'une des trois vitesses prédéfinies ("lente", "normale" ou "rapide") ou le nombre de millisecondes pour exécuter l'animation (par exemple 1000).

  • callback- Ce paramètre facultatif représente une fonction à exécuter chaque fois que l'animation se termine; s'exécute une fois pour chaque élément animé contre.

Voici la syntaxe simple pour hide() méthode -

[selector].hide( speed, [callback] );

Voici la description de tous les paramètres -

  • speed - Une chaîne représentant l'une des trois vitesses prédéfinies ("lente", "normale" ou "rapide") ou le nombre de millisecondes pour exécuter l'animation (par exemple 1000).

  • callback- Ce paramètre facultatif représente une fonction à exécuter chaque fois que l'animation se termine; s'exécute une fois pour chaque élément animé contre.

Exemple

Considérez le fichier HTML suivant avec un petit codage JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

Cela produira le résultat suivant -

Basculer les éléments

jQuery fournit des méthodes pour basculer l'état d'affichage des éléments entre révélé ou masqué. Si l'élément est initialement affiché, il sera masqué; s'il est caché, il sera affiché.

Syntaxe

Voici la syntaxe simple de l'un des toggle() méthodes -

[selector]..toggle([speed][, callback]);

Voici la description de tous les paramètres -

  • speed - Une chaîne représentant l'une des trois vitesses prédéfinies ("lente", "normale" ou "rapide") ou le nombre de millisecondes pour exécuter l'animation (par exemple 1000).

  • callback- Ce paramètre facultatif représente une fonction à exécuter chaque fois que l'animation se termine; s'exécute une fois pour chaque élément animé contre.

Exemple

Nous pouvons animer n'importe quel élément, comme un simple <div> contenant une image -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

Cela produira le résultat suivant -

Méthodes d'effet JQuery

Vous avez vu le concept de base des effets jQuery. Le tableau suivant répertorie toutes les méthodes importantes pour créer différents types d'effets -

N ° Sr. Méthodes et description
1 animer (paramètres, [durée, accélération, rappel])

Une fonction pour créer des animations personnalisées.
2 fadeIn (vitesse, [rappel])

Fondu dans tous les éléments correspondants en ajustant leur opacité et en déclenchant un rappel facultatif après la fin.
3 fadeOut (vitesse, [rappel])

Effacez tous les éléments correspondants en ajustant leur opacité à 0, puis en définissant l'affichage sur «aucun» et en déclenchant un rappel facultatif après la fin.
4 fadeTo (vitesse, opacité, rappel)

Estompe l'opacité de tous les éléments correspondants à une opacité spécifiée et déclenche un rappel facultatif après la fin.
5 cacher( )

Masque chacun de l'ensemble des éléments correspondants s'ils sont affichés.
6 cacher (vitesse, [rappel])

Masquez tous les éléments correspondants à l'aide d'une animation élégante et déclenchez un rappel facultatif après la fin.
sept spectacle( )

Affiche chacun des ensembles d'éléments correspondants s'ils sont masqués.
8 show (vitesse, [rappel])

Affichez tous les éléments correspondants en utilisant une animation élégante et en déclenchant un rappel facultatif après la fin.
9 slideDown (vitesse, [rappel])

Révélez tous les éléments correspondants en ajustant leur hauteur et en déclenchant un rappel facultatif une fois l'opération terminée.
dix slideToggle (vitesse, [rappel])

Basculez la visibilité de tous les éléments correspondants en ajustant leur hauteur et en déclenchant un rappel facultatif une fois l'opération terminée.
11 slideUp (vitesse, [rappel])

Masquez tous les éléments correspondants en ajustant leur hauteur et en déclenchant un rappel facultatif une fois l'opération terminée.
12 stop ([clearQueue, gotoEnd])

Arrête toutes les animations en cours d'exécution sur tous les éléments spécifiés.
13 basculer ()

Bascule l'affichage de chacun des éléments correspondants.
14 toggle (vitesse, [rappel])

Bascule l'affichage de chacun des ensembles d'éléments correspondants à l'aide d'une animation gracieuse et le déclenchement d'un rappel facultatif après la fin.
15 interrupteur à bascule )

Bascule l'affichage de chacun des éléments correspondants en fonction du commutateur (true affiche tous les éléments, false masque tous les éléments).
16 jQuery.fx.off

Désactivez globalement toutes les animations.

Effets basés sur la bibliothèque de l'interface utilisateur

Pour utiliser ces effets, vous pouvez télécharger la dernière bibliothèque d'interface utilisateur jQuery jquery-ui-1.11.4.custom.zipà partir de la bibliothèque d'interface utilisateur jQuery ou utilisez Google CDN pour l'utiliser de la même manière que nous l'avons fait pour jQuery.

Nous avons utilisé Google CDN pour l'interface utilisateur jQuery en utilisant l'extrait de code suivant dans la page HTML afin de pouvoir utiliser l'interface utilisateur jQuery -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>
N ° Sr. Méthodes et description
1 Aveugle

Aveugle l'élément ou le montre en l'aveuglant.
2 Rebondir

Fait rebondir l'élément verticalement ou horizontalement n fois.
3 Agrafe

Permet d'activer ou de désactiver l'élément, verticalement ou horizontalement.
4 Laissez tomber

Supprime l'élément ou l'affiche en le déposant.
5 Exploser

Décompose l'élément en plusieurs morceaux.
6 Plier

Plie l'élément comme un morceau de papier.
sept Surligner

Met en évidence l'arrière-plan avec une couleur définie.
8 Bouffée

Les animations d'échelle et de fondu créent l'effet de bouffée.
9 Palpiter

Fait pulser l'opacité de l'élément plusieurs fois.
dix Échelle

Réduisez ou augmentez un élément d'un facteur de pourcentage.
11 Secouer

Secoue l'élément n fois verticalement ou horizontalement.
12 Taille

Redimensionnez un élément à une largeur et une hauteur spécifiées.
13 Faire glisser

Fait glisser l'élément hors de la fenêtre.
14 Transfert

Transfère le contour d'un élément vers un autre.