jQuery按数据顺序淡入淡出

Question

我有一个元素列表，希望每隔 1 秒以淡入效果依次显示它们。我使用了本文 (http://demosthenes.info/blog/630/Fade-In-Elements-Sequentially-With-JQuery-and-CSS3) 中教授的 jQuery 和 CSS3 技术。它工作得很好，但是从这里我需要使用“数据顺序”属性以特定顺序显示元素，但是，我希望这种排序仅适用于按顺序显示，而不适用于 html 结构。

在下面的问题中，有人已经尝试过类似的方法，但解决方案修改了 html 元素的结构，重新排列了块。

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

我希望数据顺序等于元素出现的时间，保持初始 html 结构。是否有可能将这两种技术结合起来实现所提议的？

到目前为止，我有以下代码：

/ / 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

假设您拥有的代码是通过剪切/粘贴而不是语法错误进行修改的，那么您有几个选择。

这是使用自定义排序功能的一个 (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);
});

这是一个使用排序后的索引数组，类似于您从其他 SO 帖子 (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);
}

但是如果可以保证data-order属性无论如何都是从1开始的，为什么不进一步简化呢？ （DEMO）：

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