javascript - DIV动画和颜色更改

我正在尝试模拟TCP数据包传输，希望我已经取得了很大的进步。但是现在我想解决两个小问题，需要帮助：

1-我要在发送数据包时在页面底部的表中以黄色突出显示相应的单元格，然后在接收到其确认后将颜色更改为绿色。

2-从输入获得的speed变量不起作用！

我的代码在这里：http://jsfiddle.net/j26Qc/108/

$(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 (count < 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").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'>" + packetNumber + "</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)
                .animate({left: '+=230px'}, speed)
                .animate({left: '+=230px'}, speed)
                .fadeOut(200, function () {
                    packet
                        .css({
                            top: '+=20px',
                            backgroundColor: "#f09090"
                        })
                        .text('a' + packet.text());
                 })
                .delay(1000)
                .fadeIn(200)
                .animate({left:'-=230px'}, speed)
                .animate({left:'-=230px'}, speed)
                .fadeOut(200, function () {
                    packet
                        .css({
                            top: '-=20px',
                            backgroundColor: "#90f090"
                        });
                });

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

    }
});

最佳答案

1。

谈到着色，最好添加一个额外的变量来保存项目数。在不添加变量而使用window_left / 20的情况下，一种快速而肮脏的方式将是在animateDivs()中：

// First fade
.fadeIn(200, function() {
     $('#table #' + (index + window_left/20)).css({background:'yellow'});
 })
 // ...
 // Second fade
 .fadeIn(200, function() {
      $('#table #' + (index + window_left/20)).css({background:'green'});
 })

在第一个$("button").click(function () {之后的if{}else{}中：

for (var i = 0 ; i < items + window_left / 20; ++i)
    $('#table #' + (i)).css({background:'#fff'});

2。

谈到速度，您需要将值转换为int：

speed = parseInt($("#speed").val());
// Or
speed = +$("#speed").val();

关于javascript - DIV动画和颜色更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21770201/