1 媒介

冒泡排序是人人最熟习的算法，也是最简朴的排序算法，因其排序历程很象气泡逐步向上漂泊而得名。为了更好的明白其基础的头脑，毛三胖应用JQuery完成了冒泡排序的动画演示,并设计连续完成别的排序算法的动画演示。现将冒泡排序JQuery完成的基础思路和代码分享以下：

2 动画演示

2.1 演示地点

冒泡排序动画演示

2.2 30秒GIF

演示动画前30秒gif图，图片大小1.60M。

3 动画设计及完成

由于JavaScript中并不存在相似sleep()如许的函数，所以只能应用setInterval()来完成动画结果。因而不能应用算法的两重轮回完成体式格局，只能算法历程拟合到一个时间轴上来完成动画结果。

3.1 Html代码

<ul id="myList">
    <li>97</li>
    <li>72</li>
    <li>68</li>
    <li>29</li>
    <li>51</li>
    <li>45</li>
    <li>88</li>
    <li>32</li>
    <li>41</li>
    <li>12</li>
</ul>

3.2 中心JS代码

每隔一秒实行一次合作，完成排序后消灭interval。

function go() {
    //设置当前相比较两元素款式
    setCss();
    interval = setInterval(function () {
        //times趟数，到达数组长度-1，完毕轮回
        if(times < count -1) {
            //交流函数，如必要完成两元素交流
            var change = exchange();
            //如不交流，指针向前
            if (!change) {
                current++;
                next++;
                //内部轮回次数逐步削减
                if (current == count - 1 - times) {
                    times++;
                    current = 0;
                    next = 1;
                    //保存每一趟的历史数据
                    drawData();
                }
                setCss();
            }
        } else {
            //排序完成，清算
            $lis.removeClass("active");
            clearInterval(interval);
        }
    },1000);
}

3.3 交流动效

交流的动态结果应用了github的JQuery的swap，地点：Github jquery.swap.js。

源代码以下：

(function( $ ) {
    $.fn.swap = function(a, b) {
        t = this
        if(t.length == 1 && a.length == 1 && b == undefined ){
            return _swap(t, a);
        }else if(t.length > 1 && typeof(a) == "number" && typeof(b) == "number" ){
            _swap(t[a], t[b])
            return t;
        }else{
            $.error( 'Argument Error!' );
        }
    };

    function _swap(a, b){
        var from = $(a),
            dest = $(b),
            from_pos = from.offset(),
            dest_pos = dest.offset(),
            from_clone = from.clone(),
            dest_clone = dest.clone(),
            total_route_vertical   = dest_pos.top + dest.height() - from_pos.top,
            route_from_vertical    = 0,
            route_dest_vertical    = 0,
            total_route_horizontal = dest_pos.left + dest.width() - from_pos.left,
            route_from_horizontal  = 0,
            route_dest_horizontal  = 0

        from.css("opacity", 0);
        dest.css("opacity", 0);

        from_clone.insertAfter(from).css({position: "absolute", width: from.outerWidth(), height: from.outerHeight()}).offset(from_pos).css("z-index", "999")
        dest_clone.insertAfter(dest).css({position: "absolute", width: dest.outerWidth(), height: dest.outerHeight()}).offset(dest_pos).css("z-index", "999")

        if(from_pos.top != dest_pos.top)
            route_from_vertical = total_route_vertical - from.height()
        route_dest_vertical = total_route_vertical - dest.height()
        if(from_pos.left != dest_pos.left)
            route_from_horizontal = total_route_horizontal - from.width()
        route_dest_horizontal = total_route_horizontal - dest.width()

        from_clone.animate({
                top: "+=" + route_from_vertical + "px",
                left: "+=" + route_from_horizontal + "px",
            },
            "slow",
            function(){
                dest.insertBefore(this).css("opacity", 1);
                $(this).remove();
            });

        dest_clone.animate({
                top: "-=" + route_dest_vertical + "px",
                left: "-=" + route_dest_horizontal + "px"
            },
            "slow",
            function(){
                from.insertBefore(this).css("opacity", 1);
                $(this).remove();
            });

        return from;
    }
})( jQuery );

4 结语

现在，只完成了冒泡排序和直接插入排序两个算法的动画演示，别的的慢慢来完成吧。要进修完全的源代码可直接源文猎取。

冒泡排序动画

插入排序动画