Вставка сортировки анимации jquery

Я хочу анимировать вставку сортировки с divs, но она меняет только 2 места divs и после этой остановки анимации. Анимация отлично работает с одним для loop.So это из-за цикла или я ошибаюсь?Вставка сортировки анимации jquery

<body> 
    <button onclick="func1()">Click</button> 
</body> 

<script> 
    var arr = [4, 7, 1, 9, 8, 13, 6, 11]; 

    function showarray() { 

    for (var i = 0; i < arr.length; i++) { 

     var divSort = document.createElement("div"); 
     divSort.style.width = 30 + "px"; 
     divSort.style.height = 30 + "px"; 
     divSort.style.background = "yellow"; 
     divSort.style.display = "inline-block"; 
     divSort.style.margin = "10px"; 
     divSort.id = arr[i]; 
     divSort.innerHTML = arr[i]; 
     document.body.appendChild(divSort); }} 

    showarray(); 

    function func1(){ 

    for (var i=1;i<arr.length;i++){ 
     var index = arr[i]; 
       var j = i; 
     while (j > 0 && arr[j-1] > index){ 
     arr[j] = arr[j-1]; 
      j--;} 
     doSetTime(i,j);} } 


    function doSetTime(i,j) { 
    setTimeout(function() { 
     $("#" + arr[j]).insertBefore("#" + arr[i]); 
    }, i * 1000);} 
</script>

источник

2015-10-25 dummy

Просьба работать фрагмент кода. –

@dummy Что ожидается результат 'while (j> 0 && arr [j-1]> index)'? – guest271314

@ guest271314, если наш элемент меньше элементов перед ним, тогда это ставит элемент в нужное место – dummy

DIV элементы должны быть отсортированы

по их идентификатору

Попробуйте использовать Array.prototype.slice() создать копию arr массива Math.min() сортировать скопированный массив из минимального значения до максимального значения, Array.prototype.splice() для удаления добавленного элемента из скопированного массива, .appendTo()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 

 
<body> 
 
    <button onclick="func1()">Click</button> 
 
</body> 
 

 
<script> 
 
    var arr = [4, 7, 1, 9, 8, 13, 6, 11]; 
 

 
    function showarray() { 
 

 
    for (var i = 0; i < arr.length; i++) { 
 

 
     var divSort = document.createElement("div"); 
 
     divSort.style.width = 30 + "px"; 
 
     divSort.style.height = 30 + "px"; 
 
     divSort.style.background = "yellow"; 
 
     divSort.style.display = "inline-block"; 
 
     divSort.style.margin = "10px"; 
 
     divSort.id = arr[i]; 
 
     divSort.innerHTML = arr[i]; 
 
     document.body.appendChild(divSort); 
 
    } 
 
    } 
 

 
    showarray(); 
 

 
    var copy = arr.slice(); 
 

 
    function func1() { 
 
    var min = Math.min.apply(Math, copy); 
 
    doSetTime(min); 
 
    copy.splice(copy.indexOf(min), 1); 
 
    } 
 

 
    function doSetTime(i) { 
 
    setTimeout(function() { 
 
     $("#" + i).appendTo("body"); 
 
     if (copy.length) { 
 
     func1() 
 
     } 
 
    }, 1000); 
 
    } 
 
</script>

В качестве альтернативы, создать элемент контейнера для добавляемых элементов в

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 

 
<body> 
 
    <button onclick="func1()">Click</button> 
 
</body> 
 
<div id="container"></div> 
 

 
<script> 
 
    var arr = [4, 7, 1, 9, 8, 13, 6, 11]; 
 

 
    function showarray() { 
 

 
    for (var i = 0; i < arr.length; i++) { 
 

 
     var divSort = document.createElement("div"); 
 
     divSort.style.width = 30 + "px"; 
 
     divSort.style.height = 30 + "px"; 
 
     divSort.style.background = "yellow"; 
 
     divSort.style.display = "inline-block"; 
 
     divSort.style.margin = "10px"; 
 
     divSort.id = arr[i]; 
 
     divSort.innerHTML = arr[i]; 
 
     document.body.appendChild(divSort); 
 
    } 
 
    } 
 

 
    showarray(); 
 

 
    var copy = arr.slice(); 
 

 
    function func1() { 
 
    var min = Math.min.apply(Math, copy); 
 
    doSetTime(min); 
 
    copy.splice(copy.indexOf(min), 1); 
 
    } 
 

 
    function doSetTime(i) { 
 
    setTimeout(function() { 
 
     $("#" + i).appendTo("#container"); 
 
     if (copy.length) { 
 
     func1() 
 
     } 
 
    }, 1000); 
 
    } 
 
</script>

источник

2015-10-25 14:53:54 guest271314

Большое спасибо :) Есть ли способ, которым я могу это сделать с помощью выбора, создания пузырей или вставки? – dummy

@dummy _ «Есть ли способ, которым я могу это сделать с выбором, пузырем или сортировкой вставки?» _ Что такое «выбор»? «Пузырь»? , "сортировка вставки"? – guest271314

это алгоритм сортировки. в основном мне нужно показать, как алгоритм работает с анимацией – dummy

Вставка сортировки анимации jquery

ответ

Смежные вопросы