如何将输入元素与动画交换？纯JavaScript

实际上，我想直观地展示排序示例，我尝试了很多方法，但仍然没有找到正确的路径，在哪里移动和完成？ 我仍然尝试的是

getBoundingClientRect（）

交换输入值（我不想交换值，而是交换整个元素 视觉效果）

但以上这些对我都不好，有谁能引导我走向更好的方向，让我完成我的任务呢

function BubbleSort(){
    var VisualSort=[];
    var inputElements = document.forms["BubbleSortForm"].getElementsByClassName("formControl");
    for(var i = 0; i < inputElements.length ; i++){
        VisualSort[i] = parseInt( inputElements[i].value );
    }

    // var inputValues = parseInt( inputElements[i].value );
    for( var i = 0 ; i  < inputElements.length-1  ; i++ ){
        for( var j = 0; j <  inputElements.length-1 ; j++ ){
            if( parseInt( inputElements[j].value ) > parseInt(inputElements[j+1].value )  ){
                 /*var swapa = inputElements[j].value;
                 inputElements[j].value = inputElements[j+1].value;
                 inputElements[j+1].value = swapa;*/

                 var input_id      = inputElements[j].id;
                 var input_id_swap = inputElements[j+1].id;

                 var Bounds_j   = inputElements[j].getBoundingClientRect();
                 var Bounds_j_1 = inputElements[j+1].getBoundingClientRect();

                 var elem = document.getElementById(input_id);
                 var elem_swap = document.getElementById(input_id_swap);

                 var pos_left_1 = inputElements[j+1].getBoundingClientRect().left;
                 var pos_right_1 = inputElements[j+1].getBoundingClientRect().right;

                 var pos_left = inputElements[j].getBoundingClientRect().left;
                 var pos_right = inputElements[j].getBoundingClientRect().right;

                 var jplus1 = j+1;

                 inputElements[jplus1].style.left = pos_left + 'px';
                 inputElements[jplus1].style.right = pos_right + 'px';

                 inputElements[j].style.left = pos_left_1 + 'px';
                 inputElements[j].style.right = pos_right_1 + 'px';
             }
         }
     }
     document.getElementById("btnSort").style.display = "none";
     document.getElementById("btnGenerateInput").style.display = "block";
     return VisualSort;
}

函数BubbleSort（）{
var VisualSort=[]；
var inputElements=document.forms[“BubbleSortForm”].getElementsByClassName（“formControl”）；
对于（var i=0；iparseInt（inputElements[j+1].value））{
/*var swapa=输入元素[j]。值；
inputElements[j]。值=inputElements[j+1]。值；
inputElements[j+1]。值=swapa*/
var input_id=inputElements[j].id；
var input\u id\u swap=inputElements[j+1].id；
var Bounds_j=inputElements[j]。getBoundingClientRect（）；
var Bounds_j_1=inputElements[j+1]。getBoundingClientRect（）；
var elem=document.getElementById（输入id）；
var elem_swap=document.getElementById（输入_id_swap）；
var pos_left_1=inputElements[j+1].getBoundingClientRect（）.left；
var pos_right_1=inputElements[j+1].getBoundingClientRect（）.right；
var pos_left=inputElements[j].getBoundingClientRect（）.left；
var pos_right=inputElements[j].getBoundingClientRect（）.right；
var jplus1=j+1；
inputElements[jplus1].style.left=pos_left+'px'；
inputElements[jplus1].style.right=pos_right+'px'；
inputElements[j].style.left=pos_left_1+'px'；
inputElements[j].style.right=pos_right_1+'px'；
}
}
}
document.getElementById（“btSensor”）.style.display=“无”；
document.getElementById（“btnGenerateInput”）.style.display=“block”；
返回VisualSort；
}

你能分享你的代码吗？为什么要标记jquery动画？bubblesort函数在单击时工作……而jquery动画被错误地标记了。有人能帮我完成上述任务吗？？