使用 jQuery 添加和删除类时淡入标题答案

【问题标题】：Fade in header when adding and removing classes with jQuery使用 jQuery 添加和删除类时淡入标题
【发布时间】：2013-11-12 20:00:34
【问题描述】：

我正在设计一个在用户向下滚动页面后显示背景栏的导航。当他们滚动回顶部时，栏（背景颜色）消失。我正在使用以下说明进行操作：

Add/remove class with jquery based on vertical scroll?

它工作正常，但现在我想在滚动条上添加淡入淡出。我试过添加 fadeIn() 和 fadeOut() 方法。问题是当它淡出时，它会淡出整个#nav div！不仅仅是背景颜色。这是查询

$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('noBackground').addClass('blackBackground').fadeIn();
    } else {
        header.removeClass('blackBackground').fadeOut().addClass('noBackground');
    }
});
});

this fiddle上的完整、HTML、CSS 和 jQuery

【问题讨论】：

如果我理解您的问题，您想为<div> 的背景设置动画。看看这个 - jqueryui.com/animate.
除非您使用 jQuery UI 或颜色插件，否则您无法真正使用 jQuery 淡化颜色，但为什么不使用 CSS3 过渡呢？
我使用 addClass 来加载 .blackBackground 和 removeClass 来加载 noBackground。默认没有背景。 CSS 过渡不起作用，因为我希望类切换，在某个点触发淡入淡出。
is this what you're looking for?

标签： javascript jquery scroll fadein fadeout

【解决方案1】：

这里的问题是当您滚动回顶部时，您的 #nav div 是隐藏的。这是因为.fadeOut() 方法通过将匹配的元素淡化为透明来隐藏它们。所以你从 else 条件中删除 .fadeOut() 并且它工作正常。

这是修改后的代码。

$(function() {
    //caches a jQuery object containing the header element
    var header = $('.noBackground');
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('noBackground').addClass('blackBackground').fadeIn();
        } else {
            header.removeClass('blackBackground').addClass('noBackground');
        }
    });
});

编辑：

一个简单的扭曲就会显示效果：

$(function() {
    //caches a jQuery object containing the header element
    var header = $('.noBackground');
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            if(header.hasClass('noBackground')) {
                header.hide();
                header.removeClass('noBackground')
               .addClass('blackBackground').fadeIn(2000);
            }
        } else {
            if(header.hasClass('blackBackground'))  {   
                header.hide();
                header.removeClass('blackBackground')
               .addClass('noBackground').fadeIn(2000);
            }
        }
    });
});

Demo Fiddle.

【讨论】：

谢谢，我确实注意到了，但也有一些缺点。由于某种原因，没有实际的褪色。它只是突然出现而不会褪色。另外，当您向上滚动到顶部时，是否没有办法扭转这种效果？

【解决方案2】：

fadeOut() 方法可以在 jquery 元素上实现，而不是在类上实现。您的代码运行良好

【讨论】：