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

});

检查实时DEMO。

使用jQuery进入视图时，div会逐渐消失

1 个答案: