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

Posted 2023-05-09

【中文标题】修复滚动时延迟的jquery淡入淡出

【英文标题】：Fix delayed jquery fade on scroll

【发布时间】：2014-12-30 10:01:14

【问题描述】：

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

这几乎可以完美运行。照原样，框等待消失，直到我停止滚动。因此，如果我平滑地滚动过去其中的三个，而不是在滚动过去每一个时逐个淡入，它们都会等到我停止滚动后才淡入。我该如何解决这个问题，以便即使在滚动时也会触发淡入淡出，而不是等到停止后才触发？

【参考方案1】：

那是因为脚本中有一个bug。

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

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

---

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

【讨论】：

非常感谢！我最终只从 if 语句中删除了“.stop()”，但将它留给了 else，它给了我想要的结果。 jsfiddle