This program randomly selects two employees from a json-object Employees array, winnerPos is already defined.

For better user experience I programmed these functions to change pictures one by one. The animation stops when the randomly selected person is shown on the screen.

The slideThrough function will be triggered when the start button is pressed.

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++;
        }
    }
}

The problem is the animation doesn't work smoothly. At first it works, but not perfect. The second time the transition happens in an irregular way, i.e. different speed and fadeIn/fadeOut differs from picture to picture.

Could anyone help me to fine-tune the transition?