javascript - jquery animate in loop not working -
i've looked @ seemingly similar animate issues none of them seems quite me solution. trying animate bubble sort loop show moving numbers somehow not work.
loop, not animated, works is:
var locations = [ '1', '2', '3', '4', '5', '6', '7']; function bubblesort2 () { { swapped = false; (var = 0; < locations.length-1; i++) { if (parseint($('#' + locations[i]).text()) > parseint($('#' + locations[i+1]).text())) { $('#' + locations[i] + '>p').appendto($('#setaside')); $('#' + locations[i+1] + '>p').appendto($('#' + locations[i] )); $('#setaside>p').appendto($('#' + locations[i+1])); swapped = true; } } } while(swapped); } when try use animation features, botching things. various tweaks, can single pass animate correctly not loop. non working loop, might explain trying is:
var locations = [ '1', '2', '3', '4', '5', '6', '7']; function bubblesort2 () { { swapped = false; (var = 0; < locations.length-1; i++) { if (parseint($('#' + locations[i]).text()) > parseint($('#' + locations[i+1]).text())) { $('#' + locations[i]).fadeout("slow", function(){ $('#' + locations[i] + '>p').appendto($('#setaside')); }) ; $('#' + locations[i+1]).fadeout("slow", function(){ $('#' + locations[i]).fadein("slow", function (){ $('#' + locations[i+1] + '>p').appendto($('#' + locations[i] )); }) ; }) ; $('#' + locations[i+1]).fadein("slow", function (){ $('#' + locations[i+1] + '>p').appendto($('#' + locations[i] )); }) ; $('#setaside>p').appendto($('#' + locations[i+1])); swapped = true; } } } while(swapped); } the full html, works, is:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var locations = [ '1', '2', '3', '4', '5', '6', '7']; function bubblesort2 () { { swapped = false; (var = 0; < locations.length-1; i++) { if (parseint($('#' + locations[i]).text()) > parseint($('#' + locations[i+1]).text())) { $('#' + locations[i] + '>p').appendto($('#setaside')); $('#' + locations[i+1] + '>p').appendto($('#' + locations[i] )); $('#setaside>p').appendto($('#' + locations[i+1])); swapped = true; } } } while(swapped); } </script> </head> <body> <button onclick="bubblesort2()">bubble sort</button> <div class="hidden" id="setaside"> </div> <div id="1"> <p>55</p> </div> <div id="2"> <p>90</p> </div> <div id="3"> <p>33</p> </div> <div id="4"> <p>21</p> </div> <div id="5"> <p>80</p> </div> <div id="6"> <p>111</p> </div> <div id="7"> <p>11</p> </div> </body> </html> would appreciate help.
try instead: fiddle
html
<button>bubble sort</button> <div id="to-sort"> <div id="1"> <p>55</p> </div> <div id="2"> <p>90</p> </div> <div id="3"> <p>33</p> </div> <div id="4"> <p>21</p> </div> <div id="5"> <p>80</p> </div> <div id="6"> <p>111</p> </div> <div id="7"> <p>11</p> </div> </div> js
function dosort() { var $divs = $('#to-sort').children(), arr = []; if ($divs.length) { $divs.each(function (k, v) { arr.push(parseint($(v).find('p').text(), 10)); }); var sorted = arr.sort(function (a, b) { return - b; }); var timing = 200; $divs.each(function (k, v) { settimeout(function () { $(v).find('p').fadeout(500, function () { $(v).find('p').text(sorted[k]).fadein(500); }); }, 500 + timing); timing += 200; }); } } $('button').click(dosort);
Comments
Post a Comment