Question

I have 6 elements on my page. A priority number is displayed next to each element. I am trying to update this number after an element gets moved. But, i am having an issue with some timing of the jQuery fadeIn() fadeOut() methods. My goal is to fade out some text, update the text, then fade the text back in. The first method is doing everything i need. Although, with that method sometimes the text will change before fadeOut() has completed and looks bad. This is why i was trying to use a function for the fadeOut() method and make it change the text and execute the fadeIn() only when the fadeOut() was complete. The problem with this second method is that every element is displaying a priority of “7”. I don’t know why! Does anyone know why the second method is not working correctly?

Method #1

var priorityNumber = 1;
$("#rotatorList ul li .priority-number").each(function(){
    $(this).fadeOut(200).text(priorityNumber).fadeIn(200);
    priorityNumber = priorityNumber+1;
});

Method #2

var priorityNumber = 1;
$("#rotatorList ul li .priority-number").each(function(){
    $(this).fadeOut(200, function(){
        $(this).text(priorityNumber).fadeIn(200);
    });
    priorityNumber = priorityNumber+1;
});

Answer 1

Have you tried doing this?:

    var priorityNumber =1;
   $("#rotatorList ul li .priority-number").each(function(){
        $(this).fadeOut(200, function(){
            $(this).text(priorityNumber).fadeIn(200);
             priorityNumber = priorityNumber+1;
        });

    });

like this http://jsfiddle.net/JUSa7/1/ fiddle (tell me if I missunderstood you)

Another thing you could try is using the index provided by each:

jQuery(".test").each(function(i){
    $(this).fadeOut(200, function(){
        $(this).text(i+1).fadeIn(200);
    });
});