javascript - JQuery-パラメータ関数で変数スコープと混同される

Question

JSFiddle-SSCCE

function restoreTitle() {
    for (var i = 0; i < 4; i++) {
        clicks[i] = false;
        letter = $('#title-wrapper p[index="' + i + '"]');
        letter.css('cursor', "pointer");
    }
    animateTitle();
}

function animateTitle() {
    for (var i = 0; i < 4; i++) {
        letter = $('#title-wrapper p[index="' + i + '"]');
        direction = i < 2 ? 1 : -1;
        letter.css('right', 50 * direction + "%");
        doAnimateLetter(i, letter, direction);
    }
}

function doAnimateLetter(i, letter, direction) {
   loop(function(){
        var current = letter.css('right').replace("%", "");
        var incoming = parseInt(current) - (5 * direction);

        letter.css('right', incoming + "%");
        var completed = incoming == 0;
        if(completed) letter.fadeTo(animation_speed, 1);
        return !completed;
    });       
}

function loop(run) {
    if (run.apply()) requestAnimationFrame(function () {
        loop(run);
    });
}

私が達成したいのは、左の2つの文字が左から飛んでくるようにし、右の2つの文字が右から飛んでくるようにすることです。どこが間違っているのかわかりません。