JqueryUI - Nascondi

Questo capitolo discuterà di hide()metodo, che è uno dei metodi utilizzati per gestire gli effetti visivi di jQueryUI. Il metodo effect () applica un effetto di animazione per nascondere gli elementi.

Sintassi

Il hide() metodo ha la seguente sintassi:

.hide( effect [, options ] [, duration ] [, complete ] )

Sr.No.	Parametro e descrizione
1	effect Questa è una stringa che indica quale effetto utilizzare per la transizione.
2	options È di tipo Object e indica impostazioni e andamento specifici dell'effetto . Inoltre, ogni effetto ha il proprio set di opzioni che possono essere specificate comuni a più effetti descritti nella tabella Effetti jQueryUI .
3	duration È di tipo Numero o Stringa e indica il numero di millisecondi dell'effetto. Il suo valore predefinito è 400 .
4	complete Questo è un metodo di callback chiamato per ogni elemento quando l'effetto è completo per questo elemento.

Effetti jQueryUI

La tabella seguente descrive i vari effetti che possono essere utilizzati con il metodo hide () :

Sr.No.	Effetto e descrizione
1	blind Mostra o nasconde l'elemento come una tenda da finestra: spostando il bordo inferiore verso il basso o verso l'alto, oppure il bordo destro verso destra o verso sinistra, a seconda della direzione e della modalità specificate .
2	bounce Fa sì che l'elemento sembri rimbalzare in direzione verticale o orizzontale, mostrando o nascondendo facoltativamente l'elemento.
3	clip Mostra o nasconde l'elemento spostando insieme i bordi opposti dell'elemento fino a quando non si incontrano al centro o viceversa.
4	drop Mostra o nasconde l'elemento facendolo sembrare cadere o cadere dalla pagina.
5	explode Mostra o nasconde l'elemento suddividendolo in più parti che si muovono in direzioni radiali come se implodessero o esplodessero dalla pagina.
6	fade Mostra o nasconde l'elemento regolandone l'opacità. È lo stesso degli effetti di dissolvenza principali, ma senza opzioni.
7	fold Mostra o nasconde l'elemento regolando i bordi opposti dentro o fuori, quindi facendo lo stesso per l'altro insieme di bordi.
8	highlight Richiama l'attenzione sull'elemento modificando momentaneamente il colore di sfondo mentre mostra o nasconde l'elemento.
9	puff Espande o contrae l'elemento in posizione regolandone l'opacità.
10	pulsate Attiva e disattiva l'opacità dell'elemento prima di assicurarsi che l'elemento venga mostrato o nascosto come specificato.
11	scale Espande o contrae l'elemento di una percentuale specificata.
12	shake Scuote l'elemento avanti e indietro, verticalmente o orizzontalmente.
14	size Ridimensiona l'elemento a una larghezza e altezza specificate. Simile alla scala eccetto per come viene specificata la dimensione di destinazione.
15	slide Sposta l'elemento in modo che sembri scorrere dentro o fuori la pagina.
16	transfer Anima un elemento di contorno transitorio che fa sembrare che l'elemento venga trasferito a un altro elemento. L'aspetto dell'elemento outline deve essere definito tramite le regole CSS per la classe ui-effects-transfer o la classe specificata come opzione.

Esempi

I seguenti esempi dimostrano l'uso del metodo hide () con diversi effetti elencati nella tabella precedente.

Effetto: cieco

L'esempio seguente mostra l'uso del metodo hide () con effetto cieco . Fare clic sul pulsante Nascondi effetto cieco per vedere l'effetto cieco prima che l'elemento si nasconda.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI hide Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .toggler { width: 500px; height: 200px; }
            #button { padding: .5em 1em; text-decoration: none; }
            #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
            #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() { function runEffect() { $( "#effect" ).hide( "blind", {times: 10, distance: 100}, 1000, callback );
            };
            // callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; $( "#button" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Blind Effect Hide</a>
   </body>
</html>

Salviamo il codice sopra in un file HTML hideexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Effetto: agita

L'esempio seguente mostra l'uso del metodo shake () con effetto cieco . Fare clic sul pulsante Shake Effect Hide per vedere l'effetto shake prima che l'elemento si nasconda.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI hide Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .toggler-1 { width: 500px; height: 200px; }
            #button-1 { padding: .5em 1em; text-decoration: none; }
            #effect-1 { width: 240px; height: 135px; padding: 0.4em; position: relative; }
            #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() { function runEffect() { $( "#effect-1" ).hide( "shake", {times: 10, distance: 100}, 1000, callback );
            };
            
            // callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // set effect from select menu value $( "#button-1" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler-1">
         <div id = "effect-1" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a>
   </body>
</html>

Salviamo il codice sopra in un file HTML hideexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

↰ Previous page Next page ↱

JqueryUI - Nascondi

Sintassi

Effetti jQueryUI

Esempi

Effetto: cieco

Effetto: agita

Effetti JqueryUI

Interazioni JqueryUI

Tutorial JqueryUI

Risorse utili di JqueryUI

Utilità JqueryUI

Widget JqueryUI