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

Fix delayed jquery fade on scroll

本文关键字：jquery 淡入 淡出 延迟 滚动 时延      更新时间：2023-09-26

vol7ron向我展示了如何实现元素在向下滚动时淡入，在向上滚动时淡出的效果：为什么"（$（this）.css（'；opacity'；）==.3）"；不工作？

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
    });

这几乎完美。按原样，直到我停止滚动，这些框才会逐渐消失。因此，如果我顺利地滚动过其中三个，而不是在滚动过每一个时一个接一个地淡出，它们都会等待淡出，直到我停止滚动。我该如何补救，即使在滚动时也会触发淡入淡出，而不是等到停止后才触发？

这是因为脚本中存在错误。

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

您可以删除.stop()，也可以找到只将淡入应用于尚未淡入的元素的方法。

似乎还有另一个bug。有时项目没有被检测到在视口中，它们也不会淡入。我不知道为什么会发生这种情况。这可能与滚动速度过快有关。

相关文章：