javascript - 在使用 jQuery 进入 View 时依次淡入 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))
    }
});

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

谢谢，克里斯

Answer 1

你可以像这样延迟特定元素的淡入:

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

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

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

});​

查看直播DEMO .