Question

我设置了切片功能，调用.test的索引以淡化5个块中的.test div。这里有一个演示：http://jsfiddle.net/neal_fletcher/JT4KB/2/
jQuery的：

$(document).ready(function () {
    $('.test').each(function (index) {
        $('.test').slice(0, 5).delay(500).fadeIn(300);
        $('.test').slice(5, 10).delay(1000).fadeIn(300);
        $('.test').slice(10, 15).delay(1500).fadeIn(300);
    });
});

这很好，但由于网站将是内容管理我想要一个更紧凑的解决方案，因此不必为每5个div编写一个函数，有没有办法通过添加额外的{{1来调用此函数每5个div的延迟？如果这有道理？任何建议将不胜感激！

Answer 1

先生，先生。

http://jsfiddle.net/JT4KB/17/

$(document).ready(function () {
    setTimeout(function () {
       $('.test').each(function (i) {
         var delay = Math.floor(i/5)*500 + 500;
         $(this).delay(delay).fadeIn(300);
       });
    }, 1000);
});

Answer 2

你可以像这样在jQuery中添加一个新方法：

$.fn.eachSlice = function(size, callback) {
    var $t = $(this);
    for(var i = 0; i < $t.length; i += size) {
        callback.call($t.slice(i, i + size).get(), i / size);    
    }
    return $t;
}

然后

$(".test").eachSlice(5, function(sliceIndex) {
   $(this).delay(sliceIndex * 500).fadeIn();
});

http://jsfiddle.net/JT4KB/16/

Answer 3

您可以使用循环来实现此目的。这个循环必须循环“.test divs的数量”/ 5次：

$(document).ready(function () {
    setTimeout(function () {
        for (i=0; i<=$('.test').length/5; i++) {
            $('.test').slice(5 * i, 5*(i+1)).delay(500*(i+1)).fadeIn(300);
        };
    }, 1000);
});

jQuery：迭代中的索引切片函数

3 个答案: