1
$("#divOpcoes").fadeOut(500, function () { $(this).text('Opção ' + indiceAtual + ".").fadeIn(500); })

A linha acima está dentro de um laço for e variável "indiceAtual" é incrementada a cada passada do laço. Meu problema é: a function passada para o fadeOut só é executada depois que o laço todo termina, e o meu resultado é: para todas as passadas indiceAtual recebe o valor da ultima passada pelo laço, mas o resultado esperado é que a cada passada pelo laço o valor seja o de indiceAtual naquele momento.

EDIT1

Um pouco mais do meu código:

Funcionando sem a animação:

            if (nextLabel != null) {
                $("#divOpcoes").find("#lbOpcao" + (indiceAtual + 1)).text('Opção ' + indiceAtual + ".").attr('for', 'Opcao' + indiceAtual).attr('id', 'lbOpcao' + indiceAtual);
                $("#divOpcoes").find("#divOpcao" + (indiceAtual + 1)).attr('id', 'divOpcao' + indiceAtual);
                $("#divOpcoes").find("#Opcao" + (indiceAtual + 1)).attr('id', 'Opcao' + indiceAtual);
                $("#divOpcoes").find("#btn" + (indiceAtual + 1)).prop('onclick', null).off('click').attr('onclick', "excluirOpcao(" + indiceAtual + ")" ).attr('id', 'btn' + indiceAtual);
            }

Com animação, porém colocando todos os indices iguais:

            if (nextLabel != null) {
                $("#divOpcoes").find("#lbOpcao" + (indiceAtual + 1)).fadeOut(500, function () { $(this).text('Opção ' + indiceAtual + ".").fadeIn(500); }).attr('for', 'Opcao' + indiceAtual).attr('id', 'lbOpcao' + indiceAtual);
                $("#divOpcoes").find("#divOpcao" + (indiceAtual + 1)).attr('id', 'divOpcao' + indiceAtual);
                $("#divOpcoes").find("#Opcao" + (indiceAtual + 1)).attr('id', 'Opcao' + indiceAtual);
                $("#divOpcoes").find("#btn" + (indiceAtual + 1)).prop('onclick', null).off('click').attr('onclick', "excluirOpcao(" + indiceAtual + ")" ).attr('id', 'btn' + indiceAtual);
            }

Aplicando o setTimeout (não funcionou e nem retornou erro no console):

        if (nextLabel != null) {
            setTimeout(function () {
                $("#divOpcoes").find("#lbOpcao" + (indiceAtual + 1)).fadeOut(500, function () { $(this).text('Opção ' + indiceAtual + ".").fadeIn(500); }).attr('for', 'Opcao' + indiceAtual).attr('id', 'lbOpcao' + indiceAtual);
                $("#divOpcoes").find("#divOpcao" + (indiceAtual + 1)).attr('id', 'divOpcao' + indiceAtual);
                $("#divOpcoes").find("#Opcao" + (indiceAtual + 1)).attr('id', 'Opcao' + indiceAtual);
                $("#divOpcoes").find("#btn" + (indiceAtual + 1)).prop('onclick', null).off('click').attr('onclick', "excluirOpcao(" + indiceAtual + ")").attr('id', 'btn' + indiceAtual);
            }, 500+(i*1000));
        }

EDIT2

minha function inteira:

function reordenarOpcoes() {
    for (i = 1; i <= $("#idOpcao").val() ; i++) {

        var label = $("#divOpcoes").find("#lbOpcao" + i).val();
        if (label == null) {
            var nextLabel = $("#divOpcoes").find("#lbOpcao" + (i + 1)).val();

            if (nextLabel != null) {
                $("#divOpcoes").find("#lbOpcao" + (i + 1)).text('Opção ' + i + ".").attr('for', 'Opcao' + i).attr('id', 'lbOpcao' + i);  // .fadeOut(500, function () { $(this).text('Opção ' + indiceAtual + ".").fadeIn(500); }).attr('for', 'Opcao' + indiceAtual).attr('id', 'lbOpcao' + indiceAtual);
                $("#divOpcoes").find("#divOpcao" + (i + 1)).attr('id', 'divOpcao' + i);
                $("#divOpcoes").find("#Opcao" + (i + 1)).attr('id', 'Opcao' + i);
                $("#divOpcoes").find("#btn" + (i + 1)).prop('onclick', null).off('click').attr('onclick', "excluirOpcao(" + i + ")").attr('id', 'btn' + i);
            }
        }
    }
}
4
  • Já tentou utilizar: $("#divOpcoes").fadeOut(500).delay(500, function () { $(this).text('Opção ' + indiceAtual + ".").fadeIn(500); }) Commented 9/05/2018 às 12:37
  • Coloque o código de forma a que inclua a declaração do indiceAtual e de preferência também o laço, para se ter uma ideia mais clara do que está a tentar fazer
    – Isac
    Commented 9/05/2018 às 13:02
  • @W.Faustino tentei utilizar, mas o resultado foi que todos os textos ficaram com o fadeOut e sem fadeIn, rs. Commented 9/05/2018 às 13:41
  • @Isac indiceAtual é uma var = 1, realizei um edit, será que é o suficiente? Commented 9/05/2018 às 13:42

1 Resposta 1

3

Você vai conseguir isso usando uma função com setTimeout, onde a cada passada no laço, irá setar um tempo de 1 segundo a mais (1 segundo = soma do fadeOut(500) e fadeIn(500)), ou seja, na 1ª passada o delay será de 500ms, na 2ª de 1500ms, na 3ª de 2500ms e assim por diante.

Doutra forma creio não ser possível porque os laços (for, while, each) são assíncronos com o seu conteúdo e vai retornar a última operação processada.

Usando setTimeout, você pode criar um delay com intervalos de 1 segundo que irá processar a função com os efeitos fadeOut e fadeIn.

Exemplo:

var indiceAtual = 0;
for(var x = 0; x < 10; x++){
   (function(x){
      setTimeout(function(){
         $("#divOpcoes").fadeOut(500, function(){
            $(this).text('Opção ' + (x+1) + ".").fadeIn(500);
         });
      }, 500+(x*1000));
   }(x));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOpcoes">Opção 0.</div>

Com while

var indiceAtual = 0;
while(indiceAtual < 10){
   (function(x){
      setTimeout(function(){
         $("#divOpcoes").fadeOut(500, function(){
            $(this).text('Opção ' + (x+1) + ".").fadeIn(500);
         });
      }, 500+(x*1000));
   }(indiceAtual));
   indiceAtual++;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOpcoes">Opção 0.</div>

4
  • Efetuei um edit na pergunta, tentei aplicar mas acho que ficou errado, pode ajudar por favor? Commented 9/05/2018 às 13:39
  • Realizei o ajuste e deu certo, mas só para o primeiro item da lista, rs Commented 9/05/2018 às 13:46
  • editei a pergunta com o código.. Commented 9/05/2018 às 19:22
  • O código deve ficar mais ou menos assim: jsfiddle.net/hh7vsrxz
    – Sam
    Commented 9/05/2018 às 19:49

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 .