js排序演示

本来想写个js的排序演示 但是js是异步的编程 即使用settimeout也很难控制多个动画的运行顺序 希望有人给我的程序做补充

<input type="text" name="amount" id="amount" />
<input type="button" value="确定" id="ofcourse" />
<input type="button" value="冒泡" id="mover" />
<div id="content">
</div>
<script src="../jquery-1.4.4.min.js"></script>
<script src="../jquery-1.4.1-vsdoc.js"></script>
<script src="2012-01-30 popo.js"></script>

/// <reference path="..\jquery-1.4.1-vsdoc.js"/>

//var ar = [];

$("#ofcourse").click(function () {
    $(".pan").remove();

    array = $("#amount").val().split(',');
    for (i in array) {
        var a = $("<div>");
        a.addClass("pan");
        a.html(array[i]);
        a.css("width", "20px");
        a.css("position", "absolute");
        a.css("left", i * 30);
        a.css("height", "20px");
        a.css("background-color", "red ");
        a.attr("id", i);

        //document.write(i);
        $("#content").append(a);
    }
})

$("#mover").click(function () {
    //ar = [];
    for (i = 0; i < array.length; i++) {
        for (j = i + 1; j < array.length; j++) {
            //setTimeout(function () { cmove(); }, 1000*i*j);
            //cmove(array[j], array[i]);
            if (array[j] < array[i]) {
                //ar.push({ f: i, t: j });
                //cmove(i, j)
                //setTimeout(function () { move(i, j); }, 500);
                //                setTimeout(function () { ani1(i, j); }, i * j * 1000);

                ani1(i, j);

                temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
        }

        //document.write(nodeList[i])
    }

    //    for (i = 0; i < ar.length; i++) {
    ////ani(ar[i].f, ar[i].t, i * 1000);
    //        var f = ar[i].f;
    //        var t = ar[i].t;
    //
    //        setTimeout(function () { ani1(f, t); }, i * 1000);

    ////        var from = $("#" + f);
    ////        var to = $("#" + t);

    ////        var left = $("#" + f).css("left");
    ////        from.animate({ left: $("#" + t).css("left") }, 1000);
    ////        to.animate({ left: left }, 1000);

    ////        var id = from.attr("id");
    ////        from.attr("id", to.attr("id"));
    ////        to.attr("id", id);
    //    }
    //alert(array);
})

function ani1(i, j) {
    var from = $("#" + i);
    var to = $("#" + j);

    var id = from.attr("id");
    from.attr("id", to.attr("id"));
    to.attr("id", id);

    var left = from.css("left");
    from.animate({ left: to.css("left") }, 1000);
    to.animate({ left: left }, 1000);

    //    from.delay(i * j * 1000).animate({ left: to.css("left") }, 1000);
    //    to.delay(i * j * 1000).animate({ left: left }, 1000);
}

//function ani(i, j, d) {
////    $("#" + id).delay(d).animate({ left: po }, t);
//    var from = $("#" + i);
//    var to = $("#" + j);
//    var left = $("#" + i).css("left");
//    from.delay(d).animate({ left: $("#" + j).css("left") }, 1000);
//    to.delay(d).animate({ left: left }, 1000, function () {
//        var id = from.attr("id");
//        from.attr("id", to.attr("id"));
//        to.attr("id", id);
//    });
//}

//function cmove(i, j) {
//    ar.push({ f: i, t: j });
//}

//function move(i, j) {
//    var left = $("#" + i).css("left");
//    $("#" + i).animate({ left: $("#" + j).css("left") }, 1000);
//    $("#" + j).animate({ left: left }, 1000);
//}

//$(function () {
//    var array = [2, 1, 3, 4];
//    $("#amount").val(array);
//})