Question

我有10行div叠加在一起，每次他们到达我页面上的某个.waypoint时，我试图淡化一行div。这是我的jQuery代码，但是当它从页面顶部达到40％时，它不会导致div的每一行淡出，而只是导致div的第9行淡出而只有第9行。如何获得它以使每个div / line在达到.waypoint 40％时消失？

for (var i = 1; i < 10; i++){
    $('.infinite-container' + i).waypoint(function () {
            $('.infinite-container' + i).fadeTo('slowly', 0);
    }, {offset: '40%'});
}

我的html看起来像这样（上升到无限容器10）：

<div class="infinite-container1">
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
</div>

Answer 1

this指向当前元素：

for (var i = 1; i < 10; i++){
    $('.infinite-container' + i).waypoint(function () {
            $(this).fadeTo('slowly', 0);
    }, {offset: '40%'});
}

如果所有元素共享同一个类，则根本不需要循环：

    $('.infinite-container').waypoint(function () {
            $(this).fadeTo('slowly', 0);
    }, {offset: '40%'});

看一下jQuery航点文档的例子：

http://imakewebthings.com/jquery-waypoints/examples/dial-controls/

$('.dial li').waypoint( function(direction) {
  var $active = $(this);
  var property, value;
  // ...
});

http://imakewebthings.com/jquery-waypoints/examples/scroll-analytics/

$('.ad-unit').waypoint(function() {
  recordAdEvent($(this).data('analyticsid'));
}

jsFiddle Demo

循环的jQuery waypoint：淡出div的行

1 个答案: