замедлить скорость срабатывания js

[serrgggeee]

здравствуйте даже не знаю как правильно озвучить вопрос, если короче то есть такой код

(function($) {
    $.fn.scrollbox = function() {


        return this.each(function() {
            var container = $(this),
                containerUL,
                nextScrollId = null,
                forward,
                scrollForward,

                containerUL = container.children('ul:first-child');
            scrollForward = function() {

                containerUL.children('li').removeClass('boll1 boll2 boll3 boll4 boll5 boll6 boll7 boll8');
                containerUL.children('li:nth-child(1)').addClass('boll1');
                containerUL.children('li:nth-child(2)').addClass('boll2');
                containerUL.children('li:nth-child(3)').addClass('boll3');
                containerUL.children('li:nth-child(4)').addClass('boll4');
                containerUL.children('li:nth-child(5)').addClass('boll5');
                containerUL.children('li:nth-child(6)').addClass('boll6');
                containerUL.children('li:nth-child(7)').addClass('boll7');
                containerUL.children('li:nth-child(8)').addClass('boll8');
                return false;
            };
            forward = function() {
                scrollForward();
                return false;
            };


            // bind events for container
            container.bind('forward', function() { clearTimeout(nextScrollId);containerUL.append(containerUL.children('li:nth-child(1)')) ; forward();});

            return false;
        });
        return false;
    };return false;
}(jQuery));

смысл такой есть картинки и они двигаются вокруг оси

<div class="wrap-outer boll_main"><div class="wrap" id="demo5">

       <ul>
            <li class="boll boll1" id=""><img src="/images/img10.png" alt="Lyft"></li>
            <li class="boll boll2" id=""><img src="/images/img9.png" alt="Lyft"></li>
            <li class="boll boll3" id=""><img src="/images/img8.png" alt="Lyft"></li>
            <li class="boll boll4" id=""><img src="/images/img7.png" alt="Lyft"></li>
            <li class="boll boll5" id=""><img src="/images/img6.png" alt="Lyft"></li>
            <li class="boll boll6" id=""><img src="/images/img5.png" alt="Lyft"></li>
            <li class="boll boll7" id=""><img src="/images/img4.png" alt="Lyft"></li>
            <li class="boll boll8" id=""><img src="/images/img3.png" alt="Lyft"></li>
       </ul>

</div></div>

<script type="text/javascript">


    $('#demo5').scrollbox({


    });


        setInterval(function () {
            $('#demo5').trigger('forward');
        }, 1000);

</script>

.boll_main .boll { position: absolute;width:240px; height:240px;border-radius: 140px;}
.boll_main #demo5 li img { position: absolute;width:200px; height:200px; top: 18px;left: 20px;}
.boll_main .boll.boll1 { top: 135px;left: 440px; transition: 2s;}
.boll_main .boll.boll2 { top: 68px;left: 675px;transition:   2s;}
.boll_main .boll.boll3{ top: 135px;left: 910px;transition:  2s;}
.boll_main .boll.boll4 { top: 365px;left: 995px;transition:  2s;}
.boll_main .boll.boll5 { top: 596px; left: 910px;transition: 2s;}
.boll_main .boll.boll6 { top: 662px;left: 673px;transition:  2s;}
.boll_main .boll.boll7 { top: 583px;left: 440px;transition:  2s;}
.boll_main .boll.boll8 { top: 360px;left: 340px;transition: 2s;}
при смене позиций происходит замедление но вот первый эллемент меняется слишком быстро и получается наложение, вот не могу сдеалать так что бы он двигался с одинаковой скоростью со всеми

http://chat.hostserg.irk0.ru/oktyabr