|
Сообщение от join
|
return $(aa).animate(bpp,600);
$(bb).animate(app,600);
|
Странный return.
Сортировать позицию можно проще ... вариант ниже
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #B0C4DE;
}
#test{
margin:0 auto;
background-color:#eee;
position:relative;
height:54px;
display:block;
width:508px;
padding:6px 4px;
}
.bob{
line-height:50px;
text-align:center;
margin:0;
border:black solid 1px;
height:50px;
width:50px;
z-index:0;
background-color:orange;
position:absolute;
}
.red{
background-color:#FF0000;
z-index:100;
}
.color{
color:#FFFFFF;
font-size:28px;
-webkit-animation:color 5s ease-in-out infinite;
-moz-animation:color 5s ease-in-out infinite;
-o-animation:color 5s ease-in-out infinite;
animation:color 5s ease-in-out infinite;
}
@keyframes color{
0%{
background-color:#FF0000;
}
17%{
background-color:#FFA500;
}
34%{
background-color:#FFFF00;
}
51%{
background-color:#008000;
}
68%{
background-color:#0000FF;
}
85%{
background-color:#000080;
}
100%{
background-color:#800080;
}
}
@-webkit-keyframes color{
0%{
background-color:#FF0000;
}
17%{
background-color:#FFA500;
}
34%{
background-color:#FFFF00;
}
51%{
background-color:#008000;
}
68%{
background-color:#0000FF;
}
85%{
background-color:#000080;
}
100%{
background-color:#800080;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
Array.prototype.shuffle = function(min, max) {
min = min || 0;
max = ++max || this.length;
var len = max - min;
max = len - this.length;
this.length = len;
for (var a = this.length - 1; 0 <= a; a--) {
if (a < max) break;
var b = Math.floor(Math.random() * a),
c = void 0 === this[b] ? b + min : this[b];
this[b] = void 0 === this[a] ? a + min : this[a];
this[a] = c
}
this.reverse();
this.length -= max;
return this
};
var arr = Array(10).shuffle(0, 20).sort(function(a, b) {
return a - b
});
var speed = 500;
var $test = $("#test");
var nom = [];
$.each(arr, function(x, num) {
nom[x]=x;
$test.append($("<div/>",{"class" : "bob",text : num,css : {
left: 6 + x*50 + "px"
}}));
});
nom.shuffle();
$(".bob").each(function(i, elem) {
var x = 6 + 50 * nom[i];
$(this).animate({
left: x + "px"
}, speed * i)
});
var i = 0,
j = 0,
count = nom.length - 1;
function sorting() {
if (i < count)
if (j < count - i) {
$(".bob").removeClass("red");
$(".bob").eq(j).addClass("red");
$(".bob").eq(j + 1).addClass("red");
if (nom[j] > nom[j + 1]) {
var max = nom[j];
nom[j] = nom[j + 1];
nom[j + 1] = max;
$(".bob").each(function(k,
elem) {
var x = 6 + 50 * nom[k];
$(this).delay(300).animate({
left: x + "px"
}, speed * Math.abs(nom[j]-nom[j + 1]) ,function() {
if (!$(".bob").queue("fx").length) {
$(".bob").removeClass("red");
sorting()
}
})
})
} else {
j++;
sorting()
}
} else j = 0, i++;
else $(".bob").addClass("color")
}
$(".sort").click(function() {
sorting()
})
});
</script>
</head>
<body>
<div id="test"></div>
<button class="sort">sort</button>
</body>
</html>