When element is in browser window, fade in spans in order

Question

I am trying to combine code from a Stackoverflow question I found here with my own code. Basically when the #findme span is in the browser, I want it then to start fading in the spans one after the other from the top down (as mentioned in the last post, with the code provided by Genericrich).

The fiddle I have setup is here.

This is my js, I just can't seem to figure what I am doing wrong?

$(window).scroll(function () {
if (!spanSeen && isScrolledIntoView('#findme')) {

    //What I want to happen when the span element is in view
    $("span").each(function (index) {
        $(this).delay(400 * index).fadeIn(300);
    });
    run = true;
    }
});

var spanSeen = false;

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
     var docViewBottom = docViewTop + $(window).height();

     var elemTop = $(elem).offset().top;
     var elemBottom = elemTop + $(elem).height();

     return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
 }

I'm new to JS and slowly learning bit by bit, thanks in advanced.

Timestamp: 10/19/2013 2:22:35 PM Error: TypeError: $(...).offset(...) is undefined Source File: http://fiddle.jshell.net/xgTQP/show/ Line: 45 — Milche Patern, Oct 19 '13 at 18:23

score 0 · Accepted Answer · answered Oct 20 '13 at 15:26

Answering my own question incase others come across this post.

After changing some of the code, I realised that it was my own mistakes, and not targeting the css parameter 'Opacity' - was using fadeIn incorrectly. I believe this to be correct, amend if necessary.

The correct JS code is:

$(window).scroll(function () {
if (!spanSeen && isScrolledIntoView('#findme')) {

    //What I want to happen when the element is in view
    $("span").each(function (index) {
        $(this).delay(400 * index).animate({opacity: 1}, 500);
    });
    run = true;
}
});

var spanSeen = false;

function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

When element is in browser window, fade in spans in order

1 Answers1