Помогите, гуру JS.
Дали задание, отобразить графически процесс сортировки целых чисел, чтобы пользователь мог воочию наблюдать как сортируются данные. Сортировка - пузырьком.
Ума не приложу, как анимацию сделать тут=( Прошу дать совет, направить на истинный путь=)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<div>Введите числа, которые вы хотите занести в массив, без пробелов, через запятую</div>
<input type="text" id="arr" required>
<input type="button" value="Вывести" id="show">
<input type="button" value="Отсортировать" id="sortButton">
</form>
<div id="sort"></div>
<script>
function SortBubble() {
var showButton=document.getElementById('show');
var sortButton=document.getElementById('sortButton');
function isNumeric(n) { //Проверка на число
return !isNaN(parseFloat(n)) && isFinite(n)
}
function checkArr(arr) { //Проверяем, всё ли верно ввёл пользователь
for(i=0; i<arr.length; i++) {
number=arr[i];
if(!isNumeric(number)) {
alert('Вы допустили ошибку при вводе');
return false;
}
}
return true;
}
showButton.onclick=function() { //выводим таблицу
var arr=document.getElementById('arr').value.split(',');
if(!checkArr(arr)) return;
showButton.onclick=null;
var div=document.getElementById('sort');
var table="<table><tr>";
for(i=0; i<arr.length; i++) {
table+='<td>'+arr[i]+'</td>';
}
table+='</tr></table>'
div.innerHTML+=table;
}
sortButton.onclick=function() { //сортируем
var tds=document.getElementsByTagName('td');
var tmp=[]
for (var i = tds.length - 1; i > 0; i--) {
for (var j = 0; j < i; j++) {
if (tds[j].innerHTML > tds[j+1].innerHTML) {
tmp = tds[j].innerHTML;
tds[j].innerHTML = tds[j+1].innerHTML;
tds[j+1].innerHTML = tmp;
}
}
}
}
}
new SortBubble();
</script>
</body>
</html>