Jquery, строка в функции обратного вызова не ожидает выполнения

Question

Я хочу создать приятную анимацию, в которой исчезают абзацы, меняются содержимое, исчезают, меняются снова и так далее. дело в том, что строка, в которой я устанавливаю содержимое абзаца, была выполнена до того, как закончилось исчезновение.

function displayAnim(x){
    let textBox = document.getElementById("resultBoxText");
    fadeO(textBox,x,0);
}
function fadeO(elem,x,i){
    $("#resultBoxText").fadeIn("2000",next(elem,x,i));
}

function next(elem,x,i){
    elem.innerHTML = result[x][i]; //this line got executed well, but it executed 5 times already even before the first unfade happens
    let nextI = i+1;
    if(nextI >= 6){
        $("#resultBoxText").fadeOut("2000",show(x));
        return;
    }else{
        $("#resultBoxText").fadeOut("2000",fadeO(elem,x,nextI));
    }
}

function show(x){
    let textBox = document.getElementById("resultBoxText");
    textBox.innerHTML = result[x][6] //it reach this line already. this line is supossed to be executed after the fades occur 5 times
}

что я делаю неправильно? спасибо (^ _ ^)