1

現在、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))
    }
});

ただし、このコードを少し修正して、一致する要素が複数表示されている場合に、それぞれの間にわずかな遅延を伴って順次フェードインするようにします。そしてもちろん、ユーザーがビューポートを動かしてより多くの要素を表示する場合も、同じことを続けます。誰かが私を正しい方向に向けることができますか？

ありがとう、クリス

4

1 に答える 1

6

次のような特定の要素のフェードインを遅らせることができます。

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

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

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

});​

ライブデモをチェックしてください。

于 2012-10-01T19:12:07.437 に答える