usando jquery para palavras de exibição consecutiva
-
06-07-2019 - |
Pergunta
Eu tenho uma página que tem 2 colunas de palavras, o total de 20, que são de uma certa classe (fraca) e cada uma identificação única. A classe ‘dim’ define as palavras como oculto. Eu tenho o seguinte código jQuery execução quando eu pressionar um botão:
$().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 eu remover o comentário da linha de alerta eu sou capaz de ver que cada palavra torna-se visível e, em seguida, se esconde de novo, como é suposto. O único problema é que isso acontece muito rápido. Eu quero uma maneira de fazer cada loop esperar um determinado número de nanossegundos. Eu tentei o método setTimeout, mas eu não posso obtê-lo para fazer qualquer coisa. Alguma idéia de como desacelerar isso? Eu tentei usar .mostrar e .hide mas todos os efeitos parece acontecer ao mesmo tempo.
Meu objetivo é ter a primeira palavra na coluna 1 exibição por 2 segundos. Em seguida, ele vai embora e palavra 1 na coluna 2 exibe durante 2 segundos. Então palavra 2 coluna 1, então palavra 2 coluna 2 e assim por diante.
Graças
Solução
Você não deve precisar IDs como #wrd3
para percorrer a lista de elementos.
Eu não adaptado a seleção DOM para você, mas este código irá mostrar e ocultar cada item em um conjunto, com uma pausa entre. O intervalo em .fadeIn
significa que o item estará mostrando para que cerca de tempo antes que a função .fadeOut()
começa.
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();
Claro, você pode alterar as fades para .show()
e .hide()
, ou qualquer outra animação que quiser.