javascript - 使用 jQuery 依次淡入 div

Question

我目前正在使用 jquery.inview 来检测某些元素何时在浏览器中完全可见。我有这样的正常工作：

$('.exclusive').bind('inview',function(e, isInView, visiblePartX, visiblePartY) {
    var elem = $(this);
    if (elem.data('inviewtimer')) {
        clearTimeout(elem.data('inviewtimer'));
        elem.removeData('inviewtimer');
    }
    if (isInView) {
        elem.data('inviewtimer', setTimeout(function() {
            if (visiblePartY == 'top') {
                elem.data('seenTop', true);
            } else if (visiblePartY == 'bottom') {
                elem.data('seenBottom', true);
            } else {
                elem.data('seenTop', true);
                elem.data('seenBottom', true);
            }
            if (elem.data('seenTop') && elem.data('seenBottom')) {
                elem.animate({ 'opacity' : 1}, 1000)
                elem.unbind('inview');
            }
        }, 1000))
    }
});

但是，我想稍微修改一下这段代码，这样当视图中有多个匹配的元素时，它们会按顺序淡入，每个元素之间会有轻微的延迟。当然，当用户移动视口以将更多元素带入视图时，它会继续这样做。谁能指出我正确的方向？

谢谢，克里斯

Answer 1

您可以延迟淡入特定元素，如下所示：

var divs = $('div'); // replace with your selector

$.each(divs, function(i, item) {

    setTimeout(function() {
        $(item).fadeIn(1000);
    }, 1000 * i);

});​

检查现场演示。