Edit in JSFiddle

// Pakettikytkentä
// 20.3.2015 added random send delay to C

count = [];
solmutX = [30, 30, 30, 160, 310, 425, 425, 425];
solmutY = [50, 135, 230, 135, 135, 50, 230, 135];
jonossa = [];
poisJonosta = [];
lahettajat = [];

nopeus = 2000;
clickedA = false;
clickedB = false;
clickedC = false;
stardedA = false;
stardedB = false;
stardedC = false;

$(document).ready(function () {
    count.push(0);
    count.push(0);
    count.push(0);
    var myVar1;
    var myVar2;
    var myVar3;

    setInterval(function () {
        // liikutetaan ensin sitä luokkaa jonka paketti on jonon ensimmäisenä
        ekaLuokka = $('#' + jonossa[0]).attr('class');
        liikuta(ekaLuokka);
        for (var i = 0; i < lahettajat.length; i++) {
            if (lahettajat[i] != ekaLuokka) {
                liikuta(lahettajat[i]);
            }

        }
    }, nopeus);


    $('#start1').click(function () {
        if (!stardedA) {
            myVar1 = makePackets('a', 0, nopeus);
            stardedA = true;
        }
        if (!clickedA) {
            lahettajat.push('a');
            clickedA = true;
        }
    });

    $('#start2').click(function () {
        if (!stardedB) {
            myVar2 = makePackets('b', 1, nopeus);
        }
        stardedB = true;
        if (!clickedB) {
            lahettajat.push('b');
            clickedB = true;
        }
    });

    $('#start3').click(function () {
        if (!stardedC) {
            myVar3 = makePackets('c', 2, 5 * (Math.random() + 1) * nopeus);
            stardedC = true;
        }
        if (!clickedC) {
            lahettajat.push('c');
            clickedC = true;
        }
    });

    $('#stop').click(function () {
        clearInterval(myVar1);
        clearInterval(myVar2);
        clearInterval(myVar3);
        stardedA = false;
        stardedB = false;
        stardedC = false;
    });
    $('#stop1').click(function () {
        clearInterval(myVar1);
        stardedA = false;
    });
    $('#stop2').click(function () {
        clearInterval(myVar2);
        stardedB = false;
    });
    $('#stop3').click(function () {
        clearInterval(myVar3);
        stardedC = false;
    });
});


function makePackets(luokka, ind, aika) {
    return setInterval(function () {
        createDiv(luokka, luokka, ind);
    }, aika);
}

function liikuta(luokka) {
    var vasen = 30;
    var alas = 0;

    $('.' + luokka).each(function () {
        nytnopeus = nopeus;
        var position = $(this).position();
        switch (luokka) {
            case 'c':
                if (position.left > solmutX[6] - 30) {
                    $(this).fadeToggle(300, function () {
                        $(this).remove();
                    });
                } else if (position.left >= 145 && position.left < 155 && poisJonosta.indexOf(this.id) == -1) {
                    // jos koordinaatin mukaan jonotuspaikassa
                    if (jonossa.indexOf(this.id) > -1) {
                        if (position.top > 155) {
                            alas = -20;
                            vasen = 0;
                            nytnopeus = nopeus;
                        } else {
                            vasen = 30;
                            alas = 0;
                            poisJonosta.push(this.id);
                            jonossa.shift();
                        }
                    } else {
                        jonossa.push(this.id);
                        paikka = jonossa.indexOf(this.id);
                        vasen = 0;
                        alas = 20 * paikka;
                    }
                } else {
                    alas = 0;
                    vasen = 30;
                }
                break;
            default:
                if (position.left >= solmutX[4] - 30) {
                    vasen = 30;
                    alas = 20;
                    if (luokka == 'a') {
                        alas *= -1;
                    }
                    if (position.left > solmutX[6] - 30) {
                        $(this).fadeToggle(300, function () {
                            $(this).remove();
                        });
                    }

                } else if (position.left < solmutX[3] - 30) {
                    vasen = 30;
                    alas = -20;
                    if (luokka == 'a') {
                        alas *= -1;
                    }
                } else if (position.left >= 145 && position.left < 155 && poisJonosta.indexOf(this.id) == -1) {
                    if (jonossa.indexOf(this.id) > -1) {
                        if (position.top > 155) {
                            alas = -20;
                            vasen = 0;
                            nytnopeus = nopeus;
                        } else {
                            vasen = 30;
                            alas = 0;
                            poisJonosta.push(this.id);
                            jonossa.shift();
                        }
                    } else {
                        jonossa.push(this.id);
                        paikka = jonossa.indexOf(this.id);
                        vasen = 0;
                        alas = 20 * paikka;
                    }
                } else {
                    alas = 0;
                    vasen = 30;
                }
                break;
        }
        $(this).animate({
            left: "+=" + vasen,
            top: "+=" + alas
        }, nopeus, 'linear');
    });
}

function createDiv(text, luokka, ind) {
    d = document.createElement('div');
    count[ind]++;
    $(d).addClass(luokka)
        .html(text + count[ind])
        .attr('id', text + count[ind])
        .appendTo($("body"));
}

<button type="button" id="stop">Stop all</button>
<button type="button" id="start1">Start a</button>
<button type="button" id="start2">Start b</button>
<button type="button" id="start3">Start c</button>
<button type="button" id="stop1">Stop a</button>
<button type="button" id="stop2">Stop b</button>
<button type="button" id="stop3">Stop c</button>
<canvas id="myCanvasa" width="500" height="500">Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvasb" width="500" height="500"></canvas>
<canvas id="myCanvasc" width="500" height="500"></canvas>
<div class="circle" id='aa'>A</div>
<div class="circle" id='bb'>C</div>
<div class="circle" id='cc'>B</div>
<div class="circle" id='dd'>D</div>
<div class="circle" id='ee'>E</div>
<div class="circle" id='ff'>F</div>
<div class="circle" id='gg'>G</div>
<div class="circle" id='hh'>H</div>

div {
    background-color: #9999CC;
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
    font-size: 1em;
    position:absolute;
    top:70px;
    left:30px;
    width: 30px;
}
.b {
    top:230px;
    background-color: #F2FFCC;
}
.c {
    top:150px;
    background-color: #FF6666;
}
.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
    background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, red);
    background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}
#aa, #bb, #cc, #ff {
    left:15px;
    top:60px;
}
#bb, #dd, #ee, #gg {
    top:145px;
}
#cc, #hh {
    top:230px;
}
#dd {
    left:145px;
}
#ee {
    left:295px;
}
#gg, #ff, #hh {
    left:410px;
}
canvas {
    border:1px solid #d3d3d3;
    position:absolute;
    left:0px;
    top:40px;
}