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

File Size: 42.8KB
Views Total: 1214
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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


animationTrigger: {event: "click", selector: "#bubble-sort"},
resetTrigger: {event: "click", selector: "#bubble-reset"}


4. All the options


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


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.