JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2">
      <button id="btn" class="btn btn-primary btn-lg">Start</button>
    </div>
    <div class="col-lg-8 col-lg-offset-2">
      <div id="result_list" class="list-group"></div>
    </div>
  </div>
</div>

CSS

#result_list{
       overflow:auto;
    width:100%;
}

JavaScript

var ret = '';
for(i=1;i<=100;i++){
ret += '<li class="list-group-item">' + i + '</li>';
}
var $result_list = $('#result_list');
$result_list.html(ret);
$('#btn').click(function(){
    startConvert()
})
	function startConvert()
	{
			$result_list.find('li:eq(0)').animate({position:"relative",left:"100%",opacity:"0.2"} , 500,function(){
				$(this).remove();
			});
			setTimeout(function(){
				startConvert();
			},100)
    }