Question

vol7ron向我展示了如何实现一个效果，其中元素在向下滚动时淡入，并在向上滚动时淡出：Why does "($(this).css('opacity')==.3)" not work?

jsfiddle：http://jsfiddle.net/b7qnrsrz/16/

$(window).on("load", function () {
    function fade() {
        $('.fade').each(function () {
            /* Check the location of each desired element */
            var objectBottom = $(this).offset().top + $(this).outerHeight();
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();

            /* If the object is completely visible in the window, fade it in */
            if (objectBottom < windowBottom) { //object comes into view (scrolling down)
                if ($(this).css('opacity') != 1) {
                    $(this).stop(true,false).fadeTo(500, 1);
                }
            } else { //object goes out of view (scrolling up)
                if ($(this).css('opacity') == 1) {
                    $(this).stop(true,false).fadeTo(500, .3);
                }
            }
        });
    }
    fade(); //Fade in completely visible elements during page-load
    $(window).scroll(function () {
        fade();
    }); //Fade in elements during scroll
    });

这几乎完美无缺。在原来，盒子等待淡出，直到我停止滚动。因此，如果我顺利地滚过它们中的三个，而不是在我滚过每一个时逐个淡出，它们都等待淡入，直到我停止滚动。如何解决这个问题，以便即使在滚动时也会触发淡入淡出，而不是等到停止后？

Answer 1

那是因为脚本中有 bug 。

每次滚动时都会执行淡入淡出功能。因为动画以stop()为前缀，所以如果你慢慢滚动，动画永远不会真正运行。

您可以移除.stop()或找到仅将淡入应用于尚未淡入的元素的方法。

似乎还有另一个错误。有时项目未被检测为在视口中，并且它们不会淡入。我不确定为什么会发生这种情况。它可能与滚动速度很快有关。

修复滚动时延迟的jquery淡入淡出

1 个答案: