Tutorial jQuery – Metodo fadeToggle
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.
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.
Passo 2. Codice jQuery
Per applicare l’effetto basta richiamare la libreria jQuery e scrivere il codice necessario per ottenere l’effetto, ampiamente commentato.
Per gli stili CSS, puoi vedere il codice nei sorgenti.
Altri dettagli li puoi trovare nella pagina ufficiale del metodo.
10 Commenti
Molto utile questa nuova funzionalità jquery, permette di risparmiare molte righe di codice..
Bell’articolo!
Ciao, ti segnalo che nella pagina dell’esempio, cliccando su “Torna all’articolo” il link è erratto. Ciauz
@Giacomo
😉
@Microtag
Ciao e benvenuto nel blog 😉
Ti ringrazio per la segnalazione, ora ho corretto
Bell’articolo. Appena ho un attimo proverò sicuramente a fare qualche esperimento.
😉
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
Ciao prova a postarmi qui il codice che hai utilizzato, oppure se la pagina è on line dimmi pure l’indirizzo.
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
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!
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”