A CodePen by 0ncorhynchus. Electrophoresis

electrophoresis.html

<div id="header">
  <a href="javascript:reset();">reset</a>
  <a id="run" href="javascript:run();">run</a>
</div>
<div id="gel"></div>

script.js

var electrophoresis = function($element) {
		var _lane = 0,
			_samples = new Array(),
			$_element = $element,
			_A = 0.005,
			_B = 6,
      flg = false,
      _time = 0,
			that = {
				addLane: function(num) {
					if (num < 1) return;
					_lane++;
					var $lane = $("<div class='lane'></div>");
					$_element.append($lane);
					_samples.push($lane);
					var $well = $("<div class='well'></div>");
					$well.append("<span class='desc'>"+
            "Lane:"+_lane+"</span>");
					$lane.append($well);
					num--
					this.addLane(num);
				},
				add: function(lane, sample) {
					if (lane < 1) return;
					if (lane > _lane) {
						this.addLane(lane-_lane);
					}
					var $lane = _samples[lane-1];
					var $band = $("<div class='band'></div>");
					$band.attr("value",sample.value);
          var v = Math.exp(-_A*sample.value+_B);
          $band.attr("v",v);
          $band.append("<span class='desc'>"+
                       sample.desc+"</span>");
					$lane.append($band);
				},
        show: function() {
					$(".band").each(function() {
						var v = $(this).attr("value");
						v = Math.exp(-_A*v+_B);
						$(this).css("top",v);
					});
        },
        start: function() {
          var $band = $(".band");
          setInterval(function() {
            if (!flg) return;
            $band.each(function () {
              var x = $(this).attr("v")*_time/3000;
              $(this).css("top",x);
              _time++;
            });
          },100);
        },
        toggle: function() {
          flg = !flg;
        },
        reset: function() {
          _time = 0;
          $(".band").css("top",0);
        }
			};
		return that;
	};
var $div = $("#gel");
		that = electrophoresis($div);
that.addLane(7);
that.add(1,{"desc":"marker\n100", "value":100});
that.add(1,{"desc":"marker\n200", "value":200});
that.add(1,{"desc":"marker\n300", "value":300});
that.add(1,{"desc":"marker\n400", "value":400});
that.add(1,{"desc":"marker\n500", "value":500});
that.add(2,{"desc":"sample1", "value":339});
that.add(3,{"desc":"sample2", "value":231});
that.add(5,{"desc":"sample3", "value":468});
that.start();

var flg = false,
    run = function() {
      flg = !flg;
      if (flg) {
        $("#run").text("stop");
        that.toggle();
      } else {
        that.toggle();
        $("#run").text("run");
      }
    },
    reset = function() {
      that.reset();
      flg = true;
      $("#run").text("run");
    };

style.css

body {
  margin: 0;
}
#header {
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
  height: 35px;
  background-color: #67f;
}
#header > * {
  float: right;
  margin: 0;
  width: 50px;
  height: 35px;
  font-size: 20px;
  text-align: center;
}

#gel {
	position: relative;
	margin: 100px auto;
	width: 600px;
	height: 400px;
	background-color: #bbb;
  overflow: hidden;
}
.lane {
	position: relative;
	float: left;
	margin: 20px 13px 0 20px;
	width: 40px;
	height: 100%;
}
.well {
	position: absolute;
	width: 100%;
	height: 10px;
	content: "";
	background-color: #888;
}
.band {
	position: absolute;
	width: 100%;
	height: 7px;
	content: "";
	background-color: #333;
	box-shadow: 0 0 10px 3px #333;
}
.desc {
	position: absolute;
	display: none;
	top: 10px;
	left: 30px;
	border: 2px solid #000;
	background-color: #ddd;
	z-index: 100;
}
:hover > .desc {
  display: block;
}