jQuery Animated Sort Plugin Examples

Bubble Sort

• 23
• 51
• 11
• 44
• 8
• 99
• 3
• 62
• 33
• 16
• 70
• 85

Example Code

$("#bubble-list").animatedSort({
    animationTrigger: {event: "click", selector: "#bubble-sort"},
    resetTrigger: {event: "click", selector: "#bubble-reset"}
});
                    

Selection Sort

Example Code

$("#selection-list").animatedSort({
    listType: [2, 19, 66, 5, 3, 79, 1, 8, 25, 64, 86, 34],
    stepTime: 300,
    highlightColor: "#05ef21",
    sortedColor: "#aa0078",
    sortAlgorithm: "selection",
    animationTrigger: {event: "click", selector: "#selection-sort"},
    resetTrigger: {event: "click", selector: "#selection-reset"},
    callback: function() {$(this).css("background-color", "gray")}
});
                    

Insertion Sort

Example Code

$("#insertion-list").animatedSort({
    stepTime: 600,
    highlightColor: "teal",
    listType: {bottom: 0, top: 100, length: 12},
    sortedColor: "#e4701d",
    sortAlgorithm: "insertion",
    animationTrigger: {event: "click", selector: "#insertion-sort"},
    resetTrigger: {event: "click", selector: "#insertion-reset"}
});
                    

Quick Sort

Example Code

$("#quick-list").animatedSort({
    stepTime: 800,
    listType: {bottom: 0, top: 100, length: 12},
    sortAlgorithm: "quick",
    animationTrigger: {event: "click", selector: "#quick-sort"},
    resetTrigger: {event: "click", selector: "#quick-reset"}
});