Javascript视口淡入淡出

Question

I'm trying to accomplish something so simple it's painful, but I've yet to have luck after hours of work.

I have 4 divs, each with the class '.slide'. All I want to do is have them invisible, but fade in when they are in the viewport. If they leave the viewport, they should return to invisible. Any ideas?

    $('.slide').waypoint(
    function() {
        if( $(this).is(":in-viewport") ) {
            $(this).animate({
                opacity: 1
            }, 100);
        }
        $('.slide').not(this).animate({
            opacity: 0
        }, 100);
    },
    {
        offset: function() {
            return $.waypoints('viewportHeight') - document.getElementById('navigation').clientHeight;
        }
    }
);

http://jsfiddle.net/Agdax/3/

Answer 1

So i played a little and got this :

/*jslint browser: true */
/*global $ */

(function () {
    'use strict';

    var invisibleClassName = 'invisible',
        scrollWait = 500;

    function isInvisible(el) {
        var wh = $(window).height(),
            wt = $(window).scrollTop(),
            eh = $(el).height(),
            et = $(el).offset().top;
        return ((wh + wt) <= et || wt >= (et + eh));
    }

    function checkVisibleAll(elements) {
        elements.each(function () {
            $(this)[(isInvisible(this) ? 'add' : 'remove') + 'Class'](invisibleClassName);
        });
    }

    $.fn.visible = function () {
        var elements = this,
            scrollTimer = null;

        // Don't check too often
        function scrolled() {
            clearTimeout(scrollTimer);
            scrollTimer = setTimeout(function () {
                checkVisibleAll(elements);
            }, scrollWait);
        }

        // Onload
        checkVisibleAll(elements);

        $(window).bind("scroll resize", scrolled);
        return this;
    };
}());

Animation is visible in modern browsers.