Javascript JQuery转换动画

这个程序从一个json对象

employees

数组中随机选择两名雇员，

winnerPos

已经定义

为了更好的用户体验，我将这些功能编程为逐个更改图片。当屏幕上显示随机选择的人时，动画停止

按下

开始

按钮时，将触发

滑动

功能

function slideThrough() {
    counter = 0;
    start = true;

    clearInterval(picInterval);
    picInterval = setInterval(function () {
        changePicture();
    }, 500);
}   

function changePicture() {
    if (start) {                
        if (counter > winnerPos) {
            setWinner();
            start = false;
            killInterval();
        } else {
            var employee = Employees[counter];

            winnerPic.fadeOut(200, function () {
                this.src = 'img/' + employee.image;
                winnerName.html(employee.name);
                $(this).fadeIn(300);
            });              

            counter++;
        }
    }
}

问题是动画无法顺利运行。一开始它是有效的，但并不完美。第二次转换以不规则的方式发生，即不同的速度和衰减/衰减因图片而异

---

有人能帮我微调过渡吗？

我会避免使用

setInterval（）

，并在调用

.fadeIn（）

时添加一个函数，以启动下一张图片的动画

它看起来是这样的：

function changePicture(pos) {
    pos = pos || 0;
    if (pos <= winnerPos) {
        var employee = Employees[pos];

        winnerPic.fadeOut(200, function() {
            this.src = 'img/' + employee.image;
            winnerName.html(employee.name);
            $(this).fadeIn(300, function() {
                changePicture(pos + 1);
            });
        });
    } else {
        setWinner();
    }
}

changePicture();