Calling Jquery function inside a For loop

Question

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

The line above is within a for loop and "indiceAtual" variable is incremented with each loop pass. My problem is: the Function passed to fadeOut is only executed after the whole loop ends, and my result is: for all of the indiceAtual passed passed passes the value of the last passed loop, but the expected result is that each passed by the loop the value is that of indiceAtual at that time.

EDIT1

A little more of my code:

Working without the animation:

            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);
            }

With animation, but putting all indices equal:

            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);
            }

Applying setTimeout (did not work and returned error in the 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

my entire Function:

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);
            }
        }
    }
}

Answer 1

You will achieve this using a function with setTimeout, where every step in the loop, will set a time of 1 second more (1 second = sum of the fadeOut(500) and fadeIn(500)), that is, in the first pass the delay will be 500ms, in the 2nd of 1500ms, in the 3rd of 2500ms and so on.

Otherwise I think it is not possible because the ties (for, while, each) are asynchronous with its contents and will return the last processed operation.

Using setTimeout, you can create a delay with 1 second intervals that will process the function with the effects fadeOut and fadeIn.

Example:

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>