usando jquery per visualizzare le parole in sequenza
-
06-07-2019 - |
Domanda
Ho una pagina che ha 2 colonne di parole, 20 in totale, che sono di una certa classe (fioca) e ognuna un ID univoco. L'& # 8216; dim & # 8217; la classe definisce le parole come nascoste. Ho il seguente codice jQuery in esecuzione quando premo un pulsante:
$().ready(function()
{
var x = 20; // will be dynamic later :-)
$("#btn1").click(function()
{
for(i=1 ; i <= x ; i++)
{
//alert(i);
$(".dim").removeClass("hilite");
// this 'turns off' all the words
$("#wrd-"+i).addClass("hilite");
// this turns on the i'th word
}
});
});
Quando rimuovo il commento sulla linea di avviso sono in grado di vedere che ogni parola diventa visibile e poi si nasconde di nuovo, proprio come dovrebbe supporre. L'unico problema è che succede troppo in fretta. Voglio un modo per far aspettare ogni ciclo per un determinato numero di nanosecondi. Ho provato il metodo setTimeout ma non riesco a farlo fare nulla. Qualche idea su come rallentare questo? Ho provato a usare .show e .hide ma tutti gli effetti sembrano accadere contemporaneamente.
Il mio obiettivo è di visualizzare la prima parola nella colonna 1 per 2 secondi. Quindi scompare e la parola 1 nella colonna 2 viene visualizzata per 2 secondi. Quindi parola 2 colonna 1, quindi parola 2 colonna 2 e così via.
Grazie
Soluzione
Non dovresti avere bisogno di ID come # wrd3
per scorrere l'elenco degli elementi.
Non ho personalizzato la selezione DOM per te, ma questo codice mostrerà e nasconderà ogni elemento in un set, con una pausa tra. L'intervallo in .fadeIn
indica che l'elemento verrà visualizzato per tale periodo prima dell'avvio della funzione .fadeOut ()
.
var things = $('.foo');
var index = 0;
things.hide();
var showHide = function() {
things.eq(index).fadeIn(2000,function(){
$(this).fadeOut(2000);
});
index++;
setTimeout(showHide,3000);
};
showHide();
Ovviamente, puoi cambiare la dissolvenza in .show ()
e .hide ()
, o qualunque altra animazione tu voglia.