$(document).ready(function() { var arr = [1,2,3,4,5,6,7,8]; var a = arr.length; var iterate_again = true; var setInt; var stats = $("#stats") ; var speed = parseInt(prompt("Enter number for speed:\n1 for slow\n2 for medium\n3 for fast", 1)); speed > 3? speed = 3 : speed; speed < 1? speed = 1 : speed; isNaN(speed)? speed = 4 : speed; var sp = 700 * (3/speed); //initial shuffled array create_shuffled_array(); //###### EVENTS ###### $("#ascend").on("click",function(){ clearInterval(setInt); $("p").removeClass("red") ; sort_init("ascend"); }); $("#descend").on("click",function(){ clearInterval(setInt); $("p").removeClass("red") ; sort_init("descend"); }); $("#shuffle").on("click",function(){ stats.html("Comparison") ; clearInterval(setInt); create_shuffled_array(); }); //################### function create_shuffled_array(){ shuffle(); create_elements(); $("#animate > p").each(iterator); } function create_elements(){ $("#animate").html(""); for(var j0=0; j0" + arr[j0] + "

"); } } function sort_init(order){ var bool_temp = false; var j3=0; var process = order=="ascend"? "Ascending Sort" : "Descending Sort"; var comparison = order=="ascend"? ">" : "<"; setInt = setInterval(function(){ add_class(j3, j3+1); stats.html(process + "
" + arr[j3] + " " + comparison + " " + arr[j3+1] + " ? ") ; if( eval(arr[j3] + comparison + arr[j3+1] ) ){ stats.html(stats.html() + ' YES ') ; animate_pair(j3, j3+1); interchange_pair(j3, j3+1); bool_temp = true; } else{ stats.html(stats.html() + ' NO ') ; setTimeout(function() { remove_class(j3, j3-1) ; },sp*0.6); } j3++; if(j3 == a-1){ setTimeout(function() { remove_class(a-1, a-2) ; },sp*0.6); clearInterval(setInt) ; if( !bool_temp ){ stats.html( " Array is now sorted! ") ; return; } j3 = 0; sort_init(order) ; } },sp); }//sort_init function add_class(val1, val2){ $("#animate > p:contains('" + (arr[val1]) + "')").addClass("red"); $("#animate > p:contains('" + (arr[val2]) + "')").addClass("red") ; } function remove_class(val1, val2){ $("#animate > p:contains('" + (arr[val1]) + "')").removeClass("red") ; $("#animate > p:contains('" + (arr[val2]) + "')").removeClass("red") ; } function check_if_sorted(order){ if(arr.join("") == "0123456789"){} } function interchange_pair(val1, val2){ var temp = arr[val1]; arr[val1] = arr[val2]; arr[val2] = temp; } function animate_pair(val1, val2){ $("#animate > p:contains('" + (arr[val1]) + "')").animate({ left : "+=30" }, sp*0.6, function (){ // remove_class(val1, val2) ; }); $("#animate > p:contains('" + (arr[val2]) + "')").animate({ left : "-=30" }, sp*0.6, function (){ remove_class(val1, val2) ; }); } function iterator(ind){ var text = parseInt($(this).text()); $(this).css({"height" : (text-1) * 22 + 30, "left" : ind * 30 + 40 }); } function shuffle(){ var temp = []; while(arr.length > 0){ temp.push(arr.splice(Math.floor(Math.random() * arr.length), 1)); } arr = temp; } });

Bubble Sort Demo v2.0