jQuery fadeIn()fadeOut()计时问题

时间:2011-11-24 00:51:34

标签: jquery fadein fadeout timing

我的页面上有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;
});

1 个答案:

答案 0 :(得分: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/小提琴(告诉我,如果我误解了你)

您可以尝试的另一件事是使用每个提供的索引:

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