Делаю анимированную сортировку. Почему переодически не сработывает условие if?

Сортировка вроде как работает, но почему, то немного коряво.
Не судите строго за код, это черновое. Разбираюсь как работает

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sort</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul>

</ul>
    <script src="js/script.js"></script>
</body>
</html>

ul {
    margin: 0;
    height: 80px;
    border: 1px solid red;
    position: relative;
    display: block;
}

li {
    margin: 10px 0;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    position: absolute;
    display: inline-block;
    text-decoration: none;
    border: 1px dashed #00e;
    text-align: center;
    line-height: 60px;
}

$(function() {
    var left = 10;
    for (var i = 0; i < 5; i++) {
        var a = Math.floor(Math.random() * (0 + 10 + 1) + 0);
        $('ul').append('<li>' + a + '</li>');
        $('li').eq(i).css({left: left + 'px'});
        $('li').eq(i).attr("id", i);
        left += 80;
    }

    function bubble() {
        var arr = $('li').length;
        for (var i = 0; i < arr - 1; i++) {
            (function (i) {
                setTimeout(function () {
                    for (var j = 0; j < arr - 1; j++) {
                        var x1 = $('#'+j).text(),
                            x2 = $('#'+(j + 1)).text();
                        if ( Number(x2) < Number(x1) ) {
                            (function (j) {
                                setTimeout(function () {
                                    $('#'+j).animate({left: '+=80px'},1000);
                                    $('#'+(j + 1)).animate({left: '-=80px'},1000);
                                    var id1 = $('#'+j).attr("id");
                                    var id2 = $('#'+(j + 1)).attr("id");
                                    $('#'+(j + 1)).attr({id: id1});
                                    $('#'+j).attr({id: id2});
                                }, j * 1000);
                            })(j);
                        } else {
                            (function (j) {
                                setTimeout(function () {
                                    $('#'+j).animate({borderWidth: "8px"},500).animate({borderWidth: "1px"},500);
                                    $('#'+(j + 1)).animate({borderWidth: "8px"},500).animate({borderWidth: "1px"},500);
                                }, j * 1000);
                                console.log('Warrning')
                            })(j);
                        }
                    }
                }, i * 5000);
            })(i);
        }
    }
    bubble();
});