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

Answer 1

This one works better for me then the others in this post: http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/

Usage is simple:

$('#element').visible()

You can see how this plugin is used to create your effect here:

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

function viewable() {
    $(".module").each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
            el.addClass("come-in");
        });
    }
$(window).scroll(function() {
    viewable();
});
$(window).blur(function() {
    viewable();
});

If u use tabs. (for example jQuery UI tabs) you must check if tab is active.

$(window).scroll(function() {
    if($('#tab-1').hasClass('active')) {
        viewable();
    }
});