$("#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);
}
}
}
}
indiceAtual
e de preferência também o laço, para se ter uma ideia mais clara do que está a tentar fazer