Effet jQuery - Effet de transfert

La description

le Transfereffet peut être utilisé avec la méthode effect (). Ceci transfère le contour d'un élément vers un autre élément. Très utile lorsque vous essayez de visualiser l'interaction entre deux éléments.

Syntaxe

Voici la syntaxe simple pour utiliser cet effet -

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

Paramètres

Voici la description de tous les arguments -

  • className - Nom de classe facultatif que l'élément de transfert recevra.

  • to - jQuery selector, l'élément vers lequel transférer.

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() {

            $("div").click(function () {
               var i = 1 - $("div").index(this);
               $(this).effect("transfer",{ to: $("div").eq(i) }, 500);
            });
				
         });
			
      </script>
		
      <style>
         div.green { margin: 0px; width: 100px; height: 80px; background: green; 
            border: 1px solid black; position: relative; }
				
         div.red { margin-top: 10px; width: 50px; height: 30px; background: red; 
            border: 1px solid black; position: relative; }
				
         /* Following is required  to show border while transferring.*/
         .ui-effects-transfer { border: 2px solid black; }
      </style>
		
   </head>
	
   <body>
      <p>Click any of the squares:</p>
		
      <div class = "green"></div>
      <div class = "red"></div>
   </body>
</html>

Cela produira le résultat suivant -

jquery-effects.htm