2

Tenho a função que muda a opacidade de vários elementos com a classe .single-product para 1. Meu problema é que sempre que a página carrega, essa função vai executar uma animação por 500 milisegundos e depois disso ela executa a mesma função novamente para que todos os elementos tenham um pequeno fade quando a página carrega. Como fazer um delay menor entre essas animações?

var children = [];
$("#prod-general").children().each(function() {
    children.push(this);
});

function fadeThemOut(children) {
    if (children.length > 0) {
        var currentChild = children.shift();
        $(currentChild).set.animate({
            'opacity': '1'},
            500, function() {
                fadeThemOut(children);
        });
    }
}

JSFiddle

2

1 Resposta 1

2

A minha sugestão é:

$("#prod-general > *").each(function (i, el) {
    setTimeout(function () {
        $(el).animate({'opacity': '1'}, 500);
    }, i * 100)
});

Assim percorre todos os descendentes diretos de #prod-general e usa o index que o método passa como agrumento e multiplica por 100 milisegundos. Na prática cada elemento começa a animação 100 milisegundos depois do anterior.

Exemplo: http://jsfiddle.net/e6dxb5ef/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .