Metodo slideUp

Il metodo slideUp nasconde fluidamente gli elementi, arrotolandoli dal basso verso l'alto. Mostrare gli elementi è possibile con il metodo slideDown.

Sintassi

Nascondere in un tempo dato, 400ms di default:

javascript.slideUp(durata);

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

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

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

javascript.slideUp();

È anche possibile passare come secondo parametro una funzione di easing, e come terzo una funzione di callback - si attiverà dopo il completamento dell'animazione. Entrambi i parametri sono opzionali:

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

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

javascript.slideUp(opzioni);

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

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

Esempio

Dopo aver cliccato il pulsante, nascondiamo fluidamente il div genitore, che contiene l'input e il pulsante, con il metodo slideUp (questo div lo troveremo con il metodo parent). Passando la parola chiave slow, imposteremo la velocità a 600ms. Nel div con #test visualizzeremo la scritta 'Text is hidden':

html<div>
  <button>hide text</button>
  <input type="text" value="aaa">
</div>
<div id="test"></div>

javascript$('button').click(function() {
  $(this).parent().slideUp('slow', function() {
    $('#test').text('Text is hidden');
  });
});

Vedi anche