CODEWITHSUNDEEP
jqueryfor-loopfadeto
user3042946
user3042946

Reputation: 5

jQuery waypoint for loop: fade line of divs out

I have 10 lines of divs that stack on top of each other and am trying to fade a line of divs every time they reach a certain .waypoint on my page. This is the jQuery code I have, but instead of causing each line of div to fade out when it reaches 40% from the top of the page, it simply causes the 9th line of the div to fade and only the 9th line. How do I get it so that every div/line fades when it reaches the .waypoint 40%? 

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

My html looks like this (goes up to infinite-container10):

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

Upvotes: 0

Views: 723

Answers (1)

jantimon
jantimon

Reputation: 38150

this points to the current element:

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

If all of your elements share the same class you don't need a loop at all:

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

Take a look at the example of the jQuery waypoint documentation:

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

Upvotes: 1

Related Questions