Fw

Wordpress Creative Developer

Tutorial jQuery – Metodo fadeToggle

  • Tutorial Jquery
  • -

Appuntamento con i tutorial jQuery, dove oggi andiamo a vedere un esempio di utilizzo del metodo fadeToggle(), una delle novità introdotte dall’ultima release di jQuery.

Tutorial jQuery - Fade Toggle

Il metodo lo puoi applicare in quei casi dove devi mostare delle informazioni aggiuntive rispetto ad esempio a un prodotto, ma non vuoi rubare spazio ad altri elementi magari più importanti, facendo decidere all’utente se approfondire o meno quel particolare.

Ecco un esempio di quello che potrai fare con questo metodo. Di seguito trovi i semplici passi per ottenere l’effetto visto nell’esempio.

Passo 1. Codice HTML

Scriviamo le righe di codice necessarie per l’immagine e la descrizione.

Codice Html

Passo 2. Codice jQuery

Per applicare l’effetto basta richiamare la libreria jQuery e scrivere il codice necessario per ottenere l’effetto, ampiamente commentato.

Codice jQuery

Per gli stili CSS, puoi vedere il codice nei sorgenti.

Altri dettagli li puoi trovare nella pagina ufficiale del metodo.

Scarica il sorgente

Guarda il tutorial

10 Commenti

  1. Molto utile questa nuova funzionalità jquery, permette di risparmiare molte righe di codice..
    Bell’articolo!

  2. Ciao, ti segnalo che nella pagina dell’esempio, cliccando su “Torna all’articolo” il link è erratto. Ciauz

  3. @Giacomo
    😉

    @Microtag
    Ciao e benvenuto nel blog 😉
    Ti ringrazio per la segnalazione, ora ho corretto

  4. Bell’articolo. Appena ho un attimo proverò sicuramente a fare qualche esperimento.

  5. Ciao Fede. Volevo chiederti una curiosità. Ho preso in esame 2 dei tuoi tutorial ed ho provato ad inserire nella stessa pagine due effetti usando le jQuery. Gli effetti in questione sono il fadeToggle ed lo slideshow-foto-originale da te proposto. Non riesco a farli stare nella stessa pagina. O funziona uno o funziona l’altro. Ti risulta che ci sia qualche incompatibilità tra i due? Grazie e buona domenica

  6. Ciao prova a postarmi qui il codice che hai utilizzato, oppure se la pagina è on line dimmi pure l’indirizzo.

  7. Ciao Fede, stavo provando a unire 2 tutorial così ti avrei mandato quello per controllare il codice, ma ho visto che funzionano entrambi. Q questo punto credo che il problema sia mio, magari ho qualche file tra i javascript che deve essere cancellato. Faccio un altro paio di prove, se non riesco a far funzionare il tutto ti invio la pagina che mi da problemi e gli dai tu uno sguardo. Grazie mille per la tua disponibilità. A presto

  8. Ottimo articolo! Ma mi è sorto un dubbio..nel sito che sto creando utilizzo molti effeti jquery che si riferiscono alla release 1.4.3.
    Per utilizzare questa tecnica devo inserire un link anche alla versione 1.4.4 (quindi mettere due link) oppure mettere solo l’ultima?
    In parole povere vorrei chiederti se nell’ultima versione rilasciata ci sono anche gli “effetti” delle precendi versioni oppure se ogni versione è unica e diversa dalle precedenti.
    Grazie in anticipo!

  9. Ciao Andrea e benvenuto nel blog 😉

    Utilizza la release 1.4.4 e basta. Ogni versione è un miglioramento della precedente dove vengono aggiunte nuove funzionalità, mantendendo quelle “vecchie”

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *