jQuery fade in sequence with data-order

Question

I have a list of elements and would like to display them with the fade-in effect, in sequence, every 1 second. I used a technique with jQuery and CSS3 taught in this article (http://demosthenes.info/blog/630/Fade-In-Elements-Sequentially-With-JQuery-and-CSS3). It worked very well, but from here I need the elements to be displayed in a particular order, using the "data-order" attribute, however, I would like this sort applies only to the display in sequence, not the html structure .

In the question below, someone already tried something similar but the solution modifies the structure of the html elements, rearranging the blocks.

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

I would like the data-order was equivalent to the time in which the element appears, keeping the initial html structure. It would be possible to combine these two techniques to achieve the proposed?

So far I have the following codes:

/ / Display in sequence
$(function () {
  $('.element').each(function(i) {
    $(this).delay((i++) * 500).fadeTo(1000, 1); 
  })
});

// Use the 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;
  });
  for (index in sorted) {
    if (String (Number (index)) === index) {
      $ container.append (sorted [index]);
    }
  } 
});

Answer 1

Assuming that the code you have is munged by cut/paste, rather than syntax errors, you have a few options.

Here's one that uses a 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 one that uses the sorted array of indexes, similar to the code you extracted from the other SO 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();

for (i = 0; i < ordered.length; i++) {
    order = ordered[i];
    $el = $('.element[data-order='+order+']');
    $el.delay(order * 500).fadeTo(1000, 1);
}

But if can guarantee the data-order attribute starts from 1 anyway, why not simplify even further? (DEMO):

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