jQuery 按数据顺序淡入淡出

Question

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

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

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);
});