Effetto jQuery - Effetto dimensioni

Descrizione

Il Sizeeffect può essere usato con il metodo effect (). Questo ridimensiona un elemento a una larghezza e altezza specificate.

Sintassi

Ecco la semplice sintassi per utilizzare questo effetto:

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

Parametri

Ecco la descrizione di tutti gli argomenti:

  • from- Stato all'inizio, di solito non necessario. Questo è un oggetto nella forma di {altezza: .., larghezza: ..}

  • to- Altezza e larghezza a cui ridimensionare. Questo è un oggetto nella forma di {altezza: .., larghezza: ..}

  • origin- Il punto di fuga, predefinito per mostra / nascondi. Questo è un array e il valore predefinito è ['middle', 'center'].

  • scale- Quali aree dell'elemento verranno ridimensionate: "both", "box", "content" Box ridimensiona il bordo e la spaziatura interna dell'elemento Content ridimensiona qualsiasi contenuto all'interno dell'elemento. L'impostazione predefinita è "entrambi".

Esempio

Di seguito è riportato un semplice esempio un semplice che mostra l'utilizzo di questo effetto:

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

            $("#big").click(function(){
               $(".target").effect( "size", { to: {width: 200,height: 200} }, 1000 );
            });

            $("#small").click(function(){
               $(".target").effect( "size", { to: {width: 10,height: 10} }, 1000 );
            });
				
         });
			
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
         div{ width:100px; height:100px; background:red;}
      </style>
   </head>
	
   <body>
      <p>Click any of the buttons</p>
		
      <button id = "big"> Big </button>
      <button id = "small"> Small </button>

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

Questo produrrà il seguente risultato:

jquery-effects.htm