Question

我有一个元素列表，并希望每1秒按顺序显示淡入效果。我在本文中使用了jQuery和CSS3的技术（http://demosthenes.info/blog/630/Fade-In-Elements-Sequentially-With-JQuery-and-CSS3）。它工作得很好，但从这里我需要使用＆＃34;数据顺序＆＃34;以特定的顺序显示元素。但是，我想这种类型只适用于顺序显示，而不适用于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); });

jQuery按顺序淡入数据顺序

1 个答案: