Tutorial jQuery – Comparsa Elementi HTML In Tempi Diversi
Appuntamento che torna con i tutorial jQuery, dove andiamo a vedere tecniche per migliorare l’esperienza utente durante la navigazione in un sito.
In particolare vediamo come ottenere l’effetto che puoi vedere nel sito Brandify, dove gli elementi entrano uno alla volta con un effetto di fade.
Per ottenere l’effetto visto nel sito, bastano pochissime righe di codice, come puoi vedere da questo breve tutorial.
Passo 1. Codice HTML
Prendiamo una lista di elementi, che vogliamo far comparire uno alla volta: è importante assegnare a ognuno un id o classe diverso.
- Contenuto primo elemento
- Contenuto secondo elemento
- Contenuto terzo elemento
- Contenuto quarto elemento
Passo 2. Applichiamo jQuery
Ora basta inserire questo codice tra i tag head.
$(document).ready(function() { $('#primo-elemento').hide().delay(600).fadeIn(300); } );
$(document).ready(function() { $('#secondo-elemento').hide().delay(800).fadeIn(300); } );
$(document).ready(function() { $('#terzo-elemento').hide().delay(1000).fadeIn(300); } );
$(document).ready(function() { $('#quarto-elemento').hide().delay(1200).fadeIn(300); } );
Analizziamo una riga di codice:
- $(document).ready(function() : le funzioni verranno eseguite nel momento in cui la pagina verrà caricata;
- $(‘primo-elemento’) : applico le funzioni all’elemento html con id primo-elemento
- .hide() : nasconde l’elemento
- .delay(500) : fa entrare l’elemento con un ritardo di 500 millisecondi
- .fadeIn(300) : l’elemento entra con un effetto fade, in 300 millisecondi
Un effetto a mio avviso di impatto, e ottenibile con poche righe di codice 😉
24 Commenti
Grazie.. Ottimo jquery fede.. lo provo! -A-
Fantastico!!! Cercavo proprio questa dritta per il design del mio sitoweb!!
Ciao, ho provato a implementare questa chicca…ma non funge!
Ho creato un file html con questo codice:
$(document).ready(function(){
$(‘#primo-elemento’).hide().delay(1000)fadeIn(300);
});
$(document).ready(function(){
$(‘#secondo-elemento’).hide().delay(2000).fadeIn(300);
});
$(document).ready(function(){
$(‘#terzo-elemento’).hide().delay(3000).fadeIn(300);
});
$(document).ready(function(){
$(‘#quarto-elemento’).hide().delay(4000).fadeIn(300);
});
Contenuto primo elemento
Contenuto secondo elemento
Contenuto terzo elemento
Contenuto quarto elemento
Ho scaricato l’ultima versione di jquery, e sto usando chrome (ho provato con altri browser ma stesso risultato)! Non fa niente, mi appare la lista, ma senza alcun effetto, non genera errori ne niente…
Scusate, mi ha troncato i tag html;
http://pastebin.com/gfhta7YG
Risolto: manca un punto nella prima riga di codice nello script
Ciao Mariano, dove dici che manca il punto?
La prima stringa, “$(document).ready(function() { $(‘#primo-elemento’).hide().delay(600)*qui*fadeIn(300); } );”
Ah ok! grazie per la segnalazione 😉
ho provato a fare il tutorial ma aggiungendo il punto comunque mi da un errore di sintassi con l’editor che utilizzo (Adobe DW)
dopo una 50ina di file prova “index.html” non ha più fatto l’errore di sintassi ma dell’effetto nemmeno l’ombra.
Qualche input?
cià
Ciao vM, prova a mandarmi il file per e mail 😉
Ottimo tutorial!! provato e funziona alla perfezione! volevo implementarlo all’interno di wordpress, quale sintassi dovrei usare per fargli prendere in modo dinamico “id” dei vari post?? in quanto mettendo la lista manualmente con i singoli id non cè nessun problema, mentre in wp la lista la crea dinamicamente.. l’id è sempre post-##, cosa devo scrivere per fargli prendere dinamicamente i numeri dopo “post-“??
Consigli?? Grazie
se interessa a qualcuno ho trovato questa soluzione..
$(document).ready(function()
{$(“.primo”).each(function(i)
{$(this).hide().delay(200*i).fadeIn(300);}) ; });
basta variare il “200”, che regola con che ritardo compaiono i vari elementi in modo sequenziale.
Con questa tecnica gli elementi devono avere tutti la classe “primo”
ciauz
Ciao premetto che non ho molta esperienza ma non dovrebbe esserci un richiamo alla libreria javascript di riferimento per far funzionare il tutto?? e se si quale??
Grazie Fede
Ciao Luca e benvenuto nel blog 😉
Si bisogna includere la libreria jQuery, che puoi scaricare dal sito ufficiale.
Grazie Fede, molto gentile…
L
Ciao Fede,
premetto che sono neofita ma ugualmente seguendo il tutorial dovrei riuscire a far funzionare la pagina..
invece nulla, compare l’elenco ma senza nessun effetto…
ho scaricato l’ultima versione di jquery e inserito il richiamo nella pagina..
Non capisco dove sbaglio..
posto il codice se hai tempo e voglia di dare un occhiata:
$(document).ready(function(){
$(‘#primo-elemento’).hide().delay(1000).fadeIn(300);
});
$(document).ready(function(){
$(‘#secondo-elemento’).hide().delay(2000).fadeIn(300);
});
$(document).ready(function(){
$(‘#terzo-elemento’).hide().delay(3000).fadeIn(300);
});
$(document).ready(function(){
$(‘#quarto-elemento’).hide().delay(4000).fadeIn(300);
});
Contenuto primo elemento
Contenuto secondo elemento
Contenuto terzo elemento
Contenuto quarto elemento
Vale
ah.. mi ha tagliato il codice 🙁
temo di fare qualche errore nel richiamo al jquery
Ciao Vale e benvenuta nel blog 😉
Come hai richiamato jQuery?
Ciao Fede… ottimo questo tutorial, ma mi chiedevo, in linea teorica, cosa accadrebbe se si utilizzasse un cms come wordpress. Grazie per il tuo suggerimento.
Ciao Paolo,
questa tecnica la puoi utilizzare tranquillamente anche in WordPress. Come volevi applicare questa tecnica?
La mia è una curiosità e riguarda i post del loop della home page
Ciao Fede, so di essere indietro, ho inserito per la prima volta un loader nel mio progetto. Solo che ho un problema. Durante il load si sente l’audio del video. Io vorrei che l’audio si sentisse dopo il load. Ti lascio il link della mia bozza. E’ più facile capire dall’esempio che dalle mie parole. http://www.welovewebclub.com/test/
Qui invece c’è il mio script che ho utilizzato. http://jsfiddle.net/pmodugno/A6zpq/
Potreste darmi qualche suggerimento o indicarmi un tutorial? Ti ringrazio infinitamente.
Ciao Fede,
ho abbinato la tua animazione allo scroll della pagina, in questo modo:
$(document).ready(function() {
/* Every time the window is scrolled … */
$(window).scroll( function(){
/* Check the location of each desired element */
$(‘.hideme’).each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(‘#partner1’).hide().delay(600).fadeIn(300);
$(‘#partner2’).hide().delay(800).fadeIn(300);
$(‘#partner3’).hide().delay(1000).fadeIn(300);
$(‘#partner4’).hide().delay(1200).fadeIn(300);
$(‘#partner5’).hide().delay(1400).fadeIn(300);
}
});
});
});
Finchè gli elementi sono 4 tutto bene, ma quando aggiungo il quinto ho difficoltà a scrollare la pagina. Hai idea del perché?
Grazie mille!
ottimo !!! Grazie , Thanks