Triggering jquery event when an element appears on screen

Question

I want to show a fade effect as soon as the element appears on screen. There is a lot of content before this element so if I trigger the efect on document.ready, at certain resolutions the vistors wont´t see it.

Is it possible to trigger an event when, after scrolling down, the element becomes visible? I am almost sure I have seen this effect before, but have no idea how to achieve it.

Thank you!

Answer 1

A quick search turned up this viewport extension for jQuery that will allow you to check an element's visibility in the viewport. If your element is not in the viewport, don't do your fade-in animation.

Answer 2

I think you're referring to the jQuery plugin "Lazy Load": http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

From looking at the source code, it looks like the plugin is doing something like this:

$('#item').one('appear', function () {
    // Do stuff here
});