jQuery Step-By-Step Html List Sorting Plugin - animatedSort

Animated Sort is a fancy jQuery plugin that allows you to sort an html list step by step using one of the sorting algorithms Bubble Sort, Selection Sort, Insertion Sort and Quick Sort.

Basic Usage:

1. Create a standard html list with sort trigger and reset trigger

<div id="bubble-list">
<h3>Bubble Sort</h3>
<div class="buttons">
<button type="button" class="btn btn-primary" id="bubble-sort">Sort</button>
<button type="button" class="btn" id="bubble-reset">Reset</button>
</div>
<ul>
<li>23</li>
<li>51</li>
<li>11</li>
<li>44</li>
<li>8</li>
<li>99</li>
<li>3</li>
<li>62</li>
<li>33</li>
<li>16</li>
<li>70</li>
<li>85</li>
</ul>
</div>

2. Include jQuery javascript library and jQuery Animated Sort plugin in the bottom of your page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="src/jquery.animatedSort.js"></script>

3. Call the plugin with options

<script>

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

</script>

4. All the options

<script>

$("#bubble-list").animatedSort({
listType: 'existing', // Specify whether to use a list already in the HTML or to create a new one randomly or from an array.
sortAlgorithm: 'bubble', // Bubble Sort, Selection Sort, Insertion Sort or Quick Sort
stepTime: 1000, // Specify the time in millisecond between each step (color, slide, swap) in the animation
highlightColor: 'red',
sortedColor: 'blue',
animationTrigger: null,
resetTrigger: null,
callback: null
});

</script>

Change log:

v0.0.3 (2013-10-01)

• quicksort colors

---

This awesome jQuery plugin is developed by cristianjd. For more Advanced Usages, please check the demo page or visit the official website.