FadeOut() 的 JQuery 问题答案

【问题标题】：JQuery issues with fadeOut()FadeOut() 的 JQuery 问题
【发布时间】：2014-08-05 06:41:44
【问题描述】：

我创建了一个脚本，用于在 $(document).scrollTop() > 100 时淡入滚动到顶部按钮，并在不正确时淡出。这是由以下人员完成的：

 $.fn.scrollToTop = function() {
     $(window).scroll(function() {
            if( $(this).scrollTop() > 100) {
                $('.scroll-back').fadeIn();
            } else {
                $('.scroll-back').fadeOut();
            }
     });
 }

我会使用它：

 $(document).ready(function() {
   $(document).scrollToTop();
 }

按钮在滚动时工作正常，但是如果我在滚动到页面顶部时调整窗口大小/打开检查元素，按钮会淡出然后迅速淡入，有什么想法可以解决这个问题吗？

【问题讨论】：

这可能是因为浏览器正在触发滚动事件，因为文档的高度由于调整大小和检查器突出显示而发生变化。在某些情况下，您需要禁止滚动处理程序。
我查看了一个示例（此处：paulund.co.uk/playground/demo/jquery_scroll_to_top），它以完全相同的方式执行此操作，但如果我调整窗口大小，按钮不会淡入，就像它对我一样跨度>

标签： javascript jquery fadein fadeout

【解决方案1】：

.scroll() 事件在滚动期间发生了很多次。因此，您不断地排队一大堆淡入淡出事件。最好的办法可能是使用计时器来了解滚动实际何时停止，并且仅在滚动实际停止时触发一次淡入淡出。

但是，您至少可以通过添加.stop(true) 来避免渐变事件的备份：

$.fn.scrollToTop = function() {
     $(window).scroll(function() {
            if( $(this).scrollTop() > 100) {
                $('.scroll-back').stop(true).fadeIn();
            } else {
                $('.scroll-back').stop(true).fadeOut();
            }
     });
 }

您可以在这篇文章中看到一个插件方法，该方法等待滚动停止后再触发您的事件：More efficient way to handle $(window).scroll functions in jquery?

【讨论】：

对不起，我错过了stop()，我实际上做了$('.scroll-back').stop().fadeOut();，但不是fadeIn()，因为它看起来很难看。
@user3624205 - 您需要将.stop(true) 的第一个参数设置为true 以清除动画队列。您最好的选择是在我引用的帖子中使用.scrolled() jQuery 方法。这样您就不会在滚动期间更改数百次淡入淡出。
正如我所说，问题不在于滚动，而在于调整大小
@user3624205 - 除非您在调整大小事件上有其他代码，否则可能是因为您在调整大小时收到滚动事件，对吧？因此，防止多个滚动事件也可以清除它。
调整大小时我没有收到滚动事件。我刚刚检查过。

【解决方案2】：

在我看来，有更好的方法来实现你想要做的事情。

不要使用 JavaScript 来制作淡入淡出动画，而是使用 CSS 过渡。然后根据滚动位置使用 JavaScript 为每个按钮添加/删除一个类。

CSS：

.scroll-back {
    /* Existing style... */
    opacity: 1.0;
    transition: opacity ease-in-out 400ms;
}
.scroll-back.hide {
    opacity: 0;
}

JavaScript：

$(window).scroll(function() {
    if( $(this).scrollTop() > 100) {
        $('.scroll-back').removeClass('hide');
    } else {
        $('.scroll-back').addClass('hide');
    }
});

我发现 CSS 过渡动画比 jQuery 动画快得多，而且在停止/开始/恢复动画方面它们更加健壮。

【讨论】：