Сортировка вроде как работает, но почему, то немного коряво.
Не судите строго за код, это черновое. Разбираюсь как работает
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul>
</ul>
<script src="js/script.js"></script>
</body>
</html>
ul {
margin: 0;
height: 80px;
border: 1px solid red;
position: relative;
display: block;
}
li {
margin: 10px 0;
border-radius: 50%;
width: 60px;
height: 60px;
position: absolute;
display: inline-block;
text-decoration: none;
border: 1px dashed #00e;
text-align: center;
line-height: 60px;
}
$(function() {
var left = 10;
for (var i = 0; i < 5; i++) {
var a = Math.floor(Math.random() * (0 + 10 + 1) + 0);
$('ul').append('<li>' + a + '</li>');
$('li').eq(i).css({left: left + 'px'});
$('li').eq(i).attr("id", i);
left += 80;
}
function bubble() {
var arr = $('li').length;
for (var i = 0; i < arr - 1; i++) {
(function (i) {
setTimeout(function () {
for (var j = 0; j < arr - 1; j++) {
var x1 = $('#'+j).text(),
x2 = $('#'+(j + 1)).text();
if ( Number(x2) < Number(x1) ) {
(function (j) {
setTimeout(function () {
$('#'+j).animate({left: '+=80px'},1000);
$('#'+(j + 1)).animate({left: '-=80px'},1000);
var id1 = $('#'+j).attr("id");
var id2 = $('#'+(j + 1)).attr("id");
$('#'+(j + 1)).attr({id: id1});
$('#'+j).attr({id: id2});
}, j * 1000);
})(j);
} else {
(function (j) {
setTimeout(function () {
$('#'+j).animate({borderWidth: "8px"},500).animate({borderWidth: "1px"},500);
$('#'+(j + 1)).animate({borderWidth: "8px"},500).animate({borderWidth: "1px"},500);
}, j * 1000);
console.log('Warrning')
})(j);
}
}
}, i * 5000);
})(i);
}
}
bubble();
});
