CODEWITHSUNDEEP
jqueryjquery-waypoints
Xarcell
Xarcell

Reputation: 2011

jQuery Waypoints - All Elements FadeIn At Once Rather Than OnScroll

I'm a newb to this, but I am using jQuery Waypoint and I'm trying to get elements to "fadeIn" when scrolled into view. The problem that I'm having is that when the first element is scrolled into view, all elements fadeIn. That means you only see the first element fadeIn on scroll. The rest fadeIn outside the viewport.

I don't understand how to make each element fadeIn when scrolled into viewport. Rather than all elements fadeIn at once...

Here is my code:

      $(window).scroll(function () {
          $("#top-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#upper-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#home-main").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#home-sidebar-wrapper").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#lower-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#bottom-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#static-section").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-1").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-2").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-3").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-4").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
          $("#footer-section-5").waypoint(function(){
            $(this).fadeIn(750); },{ offset: '10px' });
      });

EDIT: by request, here is an alternate jsFiddle for helping debug: http://jsfiddle.net/tUW8k/

Upvotes: 0

Views: 531

Answers (2)

imakewebthings
imakewebthings

Reputation: 3398

Elements with display none do not live anywhere in the document. They report themselves as living at 0,0 coordinates on the page. Do not use display none elements as waypoints. Instead, animate opacity from 0 to 1.

Upvotes: 3

carter
carter

Reputation: 5432

get a fiddle going, show some css as well. your .waypoint() function should only execute when your selection becomes visible by being scrolled to. You are sure your css is starting with display:none; for those elements?

Upvotes: 0

Related Questions