DIV动画和颜色更改 [英] DIV animation and color change

问题描述

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

I'm trying to simulate TCP packet transmission, and hopefully I've made much progress. But now I want to fix two minor issues, that I need help with:

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

1- I want to highlight the corresponding cell in the table on the bottom of the page as yellow when the packet is being sent, and later when its ack is received, change the color to green.

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

2- The speed variable got from the input does not work!!

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

My code is here: 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()中:

1.

When it comes to coloring it is best to add an extra variable holding the count of items. A quick and dirty way, without adding a variable and instead using window_left / 20, would be in 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'});
 })

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

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

2.

关于速度，您需要将值转换为int:

2.

When it comes to the speed you need to convert the value to int:

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

这篇关于DIV动画和颜色更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！