1

I'm trying to animate elements on a page so that they appear once the user scrolls down to the element. Each element that needs to be animated is marked with class="hideme". And the following function is used:

$(document).ready(function() {
$(window).scroll( function(){
    $('.hideme').each( function(i){
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        if( bottom_of_window > bottom_of_object ){
            $(this).eq(i).animate({'opacity':'1'},2000);
        }
    }); 
});

However, this animated all elements at once instead of just when the user scrolls to that element.

I have read suggestions about using delay functions, but that won't work, because we want to load the element only when the user actually scrolls to that element. I've also tried using eq(), but I don't think that's working either.

Question: How do I animate each element only when the user scrolls to it?

JSFiddle: http://jsfiddle.net/6mochuff/

FarhadD
  • 485
  • 5
  • 14
  • This should do it: http://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px/15800696#15800696 – apaul Feb 21 '15 at 17:11
  • That doesn't work either. The script just made the first element appear and the remaining occurrences remained hidden even after scrolling all the way to the end of the page. – FarhadD Feb 21 '15 at 17:46
  • I would have to see a jsfiddle or some sort of example with your markup included to know why it isn't working. – apaul Feb 21 '15 at 17:51
  • The original page I'm using it on is: http://tools.accuracast.com/lp/seo.php I've set up a test page at: http://tools.accuracast.com/lp/TEST.php both have the same issue - the elements all load at once – FarhadD Feb 21 '15 at 17:56
  • in your test there is no window.onscroll. – dfsq Feb 21 '15 at 18:02
  • And here's a JSFiddle: http://jsfiddle.net/z9pwfnsq/ – FarhadD Feb 21 '15 at 18:04
  • D'oh! Updated that, but the script still doesn't work :( – FarhadD Feb 21 '15 at 18:11
  • Each element would need a parent to scroll to... without specifying one the parent will be the body. See here: http://jsfiddle.net/z9pwfnsq/2/ – apaul Feb 21 '15 at 18:41
  • Thanks - makes sense. I'm trying now to work either solution into the site (with little success so far) - need to figure out what else on the site is breaking the code – FarhadD Feb 21 '15 at 19:16

1 Answers1

1

You should not use eq with this in the loop, it makes little sense. You can refer current element in the loop as this. So the code will become:

$(window).scroll(function () {
    $('.hideme').each(function (i) {
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        if (bottom_of_window > bottom_of_object) {
            $(this).animate({opacity: 1}, 2000);
        }
    });
});
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • That doesn't work - all the .hideme elements load at once, so by the time you've scrolled further down the page, the animation has already completed. – FarhadD Feb 21 '15 at 17:40
  • Too bad, I set up a demo before I posted the answer and it worked well for me. I assume there is something with your set up. – dfsq Feb 21 '15 at 17:41
  • Did you try it with multiple elements all with the same class name? I just created a test file with no other functionality and the same problem recured - all elements loaded at once. – FarhadD Feb 21 '15 at 17:54
  • Indeed - thank you very much For some reason it's still not working on the live site - I need to figure out what's breaking the function there – FarhadD Feb 21 '15 at 19:13