1

I'm trying to fadeIn and fadeOut list items individually by scrolling every 100 pixels down or up respectively.

$(document).scroll(function() {
   var top = $(document).scrollTop();
   for (var heightForBanner = 400;heightForBanner<2000;heightForBanner+=100)
   { 
       if (top > heightForBanner) $('.photobannerA5 ul li:nth-child(" + heightForBanner  / 100 + ")').fadeIn('fast');
       if (top < heightForBanner) $('.photobannerA5 ul li:nth-child(" + heightForBanner  / 100 + ")').fadeOut('fast');
   }

by looping through the value of scrolled pixels and then assigning the value (divided by 100) to the 'nth-child'

The way I'm doing it doesn't work at all. Any idea what I'm doing wrong? Or maybe a completely different approach?

Thanks...

neel shah
  • 2,231
  • 15
  • 19
Filip Cicvarek
  • 99
  • 9
  • 1
    see this:http://stackoverflow.com/questions/23513312/load-highchart-animation-on-scroll/23513406#23513406 – Ehsan Sajjad May 08 '14 at 11:05
  • it will load data as you scroll with animation – Ehsan Sajjad May 08 '14 at 11:06
  • 1
    Without looking properly I can see one problem straight away, you are using quotes and speech marks wrong. As it is, this `$('.photobannerA5 ul li:nth-child(" + heightForBanner / 100 + ")'` is being parsed as a string entirely, and not taking the values of `heightForBanner/100`. Change this to `$('.photobannerA5 ul li:nth-child(' + heightForBanner / 100 + ')'` and you might have more luck – Rob Quincey May 08 '14 at 13:36
  • Thank you Rob. This has done it for me!!! – Filip Cicvarek May 09 '14 at 14:02

0 Answers0