Javascript Viewport淡出淡出

Question

我正在努力完成一些如此简单的事情,这很痛苦,但是经过几个小时的工作我还没有好运.

我有4个div,每个都有'.slide'类.我想做的就是让它们不可见,但是当它们在视口中时会淡入.如果他们离开视口,他们应该返回隐形状态.有任何想法吗？

    $('.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

所以我玩了一点,得到了这个:

/*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;
    };
}());

动画在现代浏览器中可见.