使用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);

});?

查看现场演示.