jQuery Effect - Effet de rebond

La description

le Bounceeffet peut être utilisé avec la méthode effect (). Cela fait rebondir l'élément plusieurs fois, verticalement ou horizontalement.

Syntaxe

Voici la syntaxe simple pour utiliser cet effet -

selector.effect( "bounce", {arguments}, speed );

Paramètres

Voici la description de tous les arguments -

  • direction- La direction de l'effet. Peut être «haut», «bas», «gauche», «droite». La valeur par défaut est "up".

  • distance- Distance à rebondir. La valeur par défaut est 20

  • mode:Le mode de l'effet. Peut être "show", "hide" ou "effect". La valeur par défaut est "effet".

  • times- Des temps pour rebondir. La valeur par défaut est 5.

Exemple

Voici un exemple simple montrant l'utilisation de cet effet -

<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" 
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
   
         $(document).ready(function() {

            $("#button").click(function(){
               $(".target").effect( "bounce", {times:3}, 300 );
            });

         });
			
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
         div{ width:100px; height:100px; background:red;}
      </style>
		
   </head>
	
   <body>
      <p>Click the button</p>
      <button id = "button"> Bounce </button>

      <div class = "target">
      </div>
   </body>
</html>

Cela produira le résultat suivant -

jquery-effects.htm