jQuery italia

Effetti base Stampa E-mail
In questa guida parleremo degli effetti base che jQuery mette a disposizione, ovvere di quegli effetti che riguardano il nascondimento o la visualizzazione di elementi.
Questi metodi hanno la possibilità di configurare la durata temporale e altri utili settaggi. Vediamo in particolare ora ogni singolo effetto:

Show ()

Il metodo show() permette di visualizzare determinati elementi, se essi sono riscontrati dalla selezione.
Tale metodo non fa distinzione se gli elementi sono già visibili o come essi siano stati nascosti (tramite hide() o tramite stile CSS), con show() questi elementi verranno resi visibili comunque.
Vi sono due modalità di utilizzo, quella senza animazione, ovvero senza ritardi, e quella con animazione a cui è anche possibile associare una callback da eseguire a fine effetto.
Le dimensioni sono calcolate dinamicamente in base alla velocità data.
Vediamo due esempi molto semplici:

$("p").show() //mostra tutti i paragrafi

Ecco il secondo esempio con la velocità impostata:

$("#mostra").click(function () {
      $("#paragrafo").show("slow");
    });




Come si può ben vedere il secondo esempio utilizza un parametro che evidenzia la durata dell'operazione di mostra dell'elemento.
Più in generale, lo show visto nella seconda modalità ha una sintassi del tipo: show (speed, [callback]). Speed può essere come in questo caso una stringa (slow, normal, fast) o un numero che rappresenta la durata in millisecondi.
Il parametro, opzionale, callback evidenzia la funzione da eseguire ad effetto terminato.


Hide ()

Il metodo hide() è l'esatto opposto del metodo show() e quindi non fa nient'altro che nascondere gli elementi. Se gli elementi sono già nascosti questo metodo non ha nessun effetto.
Anche qui è possibile avere una animazione che nasconde gradualmente l'elemento.
La sintassi è speculare a quella di show(): hide(speed, [callback]).
Ecco un primo esempio che al click su di un link lo nasconde:
$("#link").click(function () {
      $(this).hide();
      return false; //ritorna false solo per non ricaricare la pagina
    });

clicca qui per nascondermi


In questo secondo esempio invece faremo sparire un paragrafo al click sul pulsante:

   $("#nascondi").click(function () {
      $(".mia_classe").hide("slow");
    });


Benvenuto su

jQueryitalia.it




Toggle ()

Con questo metodo si può invertire la visibilità di un elemento.
Ad esempio se l'elemento è visibile lo si rende invisibile, viceversa per il contrario. Per effettuare questo vengono utilizzati i metodi show() e hide().
Ha tre diverse sintassi:
  • toggle(): senza parametri effettua la semplice inversione della visibilità;
  • toggle(switch): quando il parametro switch è vero vengono visualizzati gli elementi, se è falso vengono nascosti. Molto utile se si usano delle variabili per creare condizioni;
  • toggle(speed,[callback]): come per show() e per hide(), anche questo metodo permette di impostare la velocità dell'azione.

Ecco un esempio, in cui useremo l'ultima delle tre tipologie di toggle() viste sopra:

   $("#scambia").click(function () {
      $("#par_toggle").toggle(2000); //2 secondi
    });

Paragrafo che compare e scompare



Con questi tre metodi abbiamo finito di presentare gli effetti base che possono essere creati con i metodi di jQuery.
Naturalemente possono essere create combinazioni degli stessi e utilizzare la propria fantasia per dare al proprio sito una nuova faccia.
Per altri effetti più di "impatto" rimandiamo a proseguire con la lettura di questa sezione.
 

Chi è online

 18 visitatori online

Sondaggi

Che cosa pensi della grafica di questo sito ?