css3 - Jquery fade in sequence with data-order -

i have list of elements , display them fade-in effect, in sequence, every 1 second. used technique jquery , css3 taught in article (http://demosthenes.info/blog/630/fade-in-elements-sequentially-with-jquery-and-css3). worked well, here need elements displayed in particular order, using "data-order" attribute, however, sort applies display in sequence, not html structure .

in question below, tried similar solution modifies structure of html elements, rearranging blocks.

https://stackoverflow.com/questions/8433691/sorting-list-of-elements-in-jquery/23298715 # 23298715

i data-order equivalent time in element appears, keeping initial html structure. possible combine these 2 techniques achieve proposed?

so far have following codes:

/ / display in sequence $ (function () { $('.element').each(function(i) { $(this).delay((i++) * 500).fadeto(1000, 1); }) });  / / use attribute data-order jquery (function ($) {  var $ fields, $ container, sorted, index;  $ container = $ ('body'); $ fields = $ (".element[data-order]", $ container); sorted = []; $ fields.detach (.) each (function () { sorted [parseint (this.getattribute ("data-order"), 10)] = this; }); (index in sorted) { if (string (number (index)) === index) { $ container.append (sorted [index]); } }  }); 

assuming code have munged cut/paste, rather syntax errors, have few options.

here's 1 uses custom sort function (demo):

function sortbydataorder(a, b) {     var aorder = a.dataset.order;     var border = b.dataset.order;     if (aorder < border) {         return -1;     } else if (aorder > border) {         return 1;     } else {         return 0;     } }  var $elements = $('.element');  $elements.sort(sortbydataorder).each(function (i) {     var o = $(this).attr('data-order');     $(this).delay((i++) * 500).fadeto(1000, 1); }); 

here's 1 uses sorted array of indexes, similar code extracted other post (demo):

var ordered = [], $el, i, order;  var $elements = $('.element');  $elements.each(function() {     var o = parseint($(this).attr('data-order'), 10);     ordered.push(o); });  ordered.sort();  (i = 0; < ordered.length; i++) {     order = ordered[i];     $el = $('.element[data-order='+order+']');     $el.delay(order * 500).fadeto(1000, 1); } 

but if can guarantee data-order attribute starts 1 anyway, why not simplify further? (demo):

$('.element').each(function() {     var $el, o;     $el = $(this);     o = parseint($el.attr('data-order'), 10);     $el.delay(o * 500).fadeto(1000, 1); });