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("
"+i+"
"); } 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.appendTo(".packets"); $("" + packetNumber + "").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();}); } }); 

Answer 1

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{}之后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();