Metodo toggle

Il metodo toggle alterna la visualizzazione/nascondimento fluido degli elementi. Se un elemento è visibile, verrà nascosto e viceversa.

Sintassi

Mostra per un tempo specificato in millisecondi, 400ms di default:

javascript.toggle(durata);

Il tempo può essere specificato non solo in millisecondi, ma anche con le parole chiave slow (600ms) e fast (200ms), maggiore è il valore, più lenta è l'animazione:

javascript.toggle('slow' o 'fast');

È possibile passare il parametro display con valore true o false. Se true, l'elemento sarà solo mostrato, false - solo nascosto:

javascript.toggle(display);

Se non si specificano parametri - non ci sarà animazione, gli elementi verranno mostrati/nascosti istantaneamente:

javascript.toggle();

È anche possibile passare come secondo parametro una funzione di easing, e come terzo una funzione di callback - che viene eseguita al completamento dell'animazione. Entrambi i parametri sono opzionali:

javascript.toggle(durata, [funzione di easing], [funzione di callback]);

Si può passare semplicemente come secondo parametro opzionale una funzione di callback - che viene eseguita al completamento dell'animazione:

javascript.toggle(durata, [funzione di callback]);

È possibile passare al metodo varie opzioni, sotto forma di oggetto JavaScript, contenente coppie chiave: valore:

javascript.toggle(opzioni);

Un tale oggetto può contenere i seguenti parametri e funzioni - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. La descrizione di questi parametri è disponibile per il metodo animate. Ad esempio, impostiamo la durata e la funzione di easing:

javascript.toggle( {duration: 800, easing: easeInSine} );

Esempio

Dopo aver cliccato il pulsante, mostriamo in modo fluido un paragrafo nascosto utilizzando il metodo toggle. Passando la parola chiave slow, impostiamo la velocità a 600ms. Al click successivo - lo nascondiamo:

html<button>mostra testo</button>
<p style="display: none">testo</p>

javascript$('button').click(function() {
  $('p').toggle('slow');
});

Vedi anche