jQuery fadeIn() fadeOut()计时问题

Question

我的页面上有6个元素。在每个元素旁边显示一个优先级编号。我试图在一个元素被移动后更新这个数字。但是，我有一个问题与一些时间的jQuery fadeIn() fadeOut()方法。我的目标是淡化一些文本，更新文本，然后将文本淡入。第一种方法是做我需要做的一切。但是，使用该方法时，有时文本会在fadeOut()完成之前发生变化，并且看起来很糟糕。这就是为什么我试图使用fadeOut()方法的函数，并使其仅在fadeOut()完成时更改文本并执行fadeIn()。第二种方法的问题是，每个元素都显示"7"的优先级。我不知道为什么!有人知道为什么第二种方法不能正常工作吗?

方法# 1

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

方法# 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

你试过这样做吗?:

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

像这样http://jsfiddle.net/JUSa7/1/fiddle(告诉我如果我误解了你)

另一个你可以尝试的方法是使用each提供的索引:

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