DIV动画和财产变化

Question

我试图模拟TCP数据包传输和滑动窗口，幸运的是我取得了很大的进步。但现在我想用滑动窗口解决一个小问题，这是一个滑动DIV：

希望如果您熟悉TCP的慢启动，则窗口大小会加倍到一个数字，然后递增1。这很有效。现在我要解决的是向右滑动。所以我想在原始机器上收到每个确认时自动向右滑动一步。目前收到确认时它不会移动;因此，每次按下按钮，它都会重新传输许多以前的数据包！我的工作在这里：http://web.engr.illinois.edu/~shossen2/CS438/Project/

$(document).ready(function () {
    var count = 0;
    var items = 0;
    var packetNumber = 0;
    var speed = 0;
    var ssth= $("#ssth").val();
    var window_left=0;

    for (var i = 1; i <= 32; i++) {
        $('#table').append("<div class='inline' id='"+i+"'>"+i+"</div>");
    }
    document.getElementById(1).style.width = 22;

    $("button").click(function() {
        if (items < ssth) {
            if (items == 0)
                items = 1;
            else
                items = items * 2;      
            count++;
        } else {
            items = items + 1;
        }

        window_left += 20;
        window_width=items * 20;

        document.getElementById("window_size").innerHTML = items;
        document.getElementById("window").style.left= window_left + "px";
        document.getElementById("window").style.width=window_width + "px";

        speed = +$("#speed").val();
        createDivs(items);
        animateDivs();
    });

    function createDivs(divs) {
        packetNumber = 1;
        var left = 60;
        for (var i = 0; i < divs; i++) {
            var div = $("<div class='t'></div>");
            div.appendTo(".packets");
            $("<font class='span'>" + (parseInt(packetNumber) + parseInt(window_left/20) -1) + "</font>").appendTo(div);
            packetNumber++;
            div.css({
                left: left
               /* opacity: 0*/
            }).fadeOut(0);

            //div.hide();
            //left += 20;
        }
    }

    function animateDivs() {
        $(".t").each(function (index) {  // added the index parameter
            var packet = $(this);

            packet
                .delay(index * 200)
                .fadeIn(200, function() {
                    $('#table #' + (index + window_left/20)).css({background:'yellow'});
                })
                .animate({left: '+=230px'}, speed)
                .animate({left: '+=230px'}, speed)
                .fadeOut(200, function () {
                    packet
                        .css({
                            top: '+=20px', 
                            backgroundColor: "#f09090"
                        })    
                        .text('a' + packet.text());
                 })                
                .delay(500)
                .fadeIn(200)
                .animate({left:'-=230px'}, speed)
                .animate({left:'-=230px'}, speed)
                .fadeOut(200, function () {

                    packet
                        .css({
                            top: '-=20px',
                            backgroundColor: "#90f090"

                        });
                    $('#table #' + (index + window_left/20)).css({background:'lightgreen'});
                });

            }).promise().done(function(){
                $(".packets").empty();
            });
    }
});