0

我有 10 行 div 相互堆叠，并且每次它们到达我页面上的某个 .waypoint 时都试图淡化一行 div。这是我拥有的 jQuery 代码，但是当它从页面顶部到达 40% 时，它不会导致 div 的每一行淡出，它只是导致 div 的第 9 行淡出并且只有第 9 行。我如何获得它，以便每个 div/行在达到 .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>
4

1 回答 1

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 waypoint 文档的示例：

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

于 2013-11-27T18:07:03.613 回答