CSS/Jquery 淡入背景答案

【问题标题】：CSS/Jquery Fade in backgroundCSS/Jquery 淡入背景
【发布时间】：2014-02-24 16:43:30
【问题描述】：

只是想知道解决此问题的最佳方法是什么。我有一个白色的导航菜单。当页面向下滚动时，它会变得粘滞。当它变得粘稠时，我希望背景颜色从白色变为（比方说）蓝色。

我正在使用 Jquery 插件“Waypoints”并认为我可以使用切换来执行此操作，但无法弄清楚，因为我只想淡化背景而不是整个 div（因为这会导致菜单标题也会褪色）

有什么想法吗？

这里是 JS

$('#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky').waypoint(function() {
   $('#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky').toggleClass( 'animate' );

----这个 JS 的作用是当 #megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky 到达屏幕顶部（变为“粘性”）时，它将切换类 .animate（这是 css会选择蓝色背景和任何动画）

我以前用它来制作关键帧动画。前任。指定关键帧，然后在 .animate 类中包含关键帧动画，以便每当我到达页面的某个部分时它就会动画。

如果需要更多信息，请告诉我。

只是寻找一些指导或方向，了解如何仅针对淡入背景进行定位

谢谢！

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

查看类似的question。我从那个帖子中复制了我的answer。

使用过渡属性。基本上，您将转换属性设置为导航类的背景颜色并给它一个持续时间。

$(window).scroll(function() {
	if ($(this).scrollTop() > 200) {
            $('.navigation').css('background-color', 'blue');
        } else {
            $('.navigation').css('background-color', 'red');
        }
        });

	.navigation{
		height:1000px;	
		background-color: black;
		transition:background-color 2s;
	}

<!DOCTYPE html>
<html>

<body>
<nav class="navigation" id="nav">
      <ul>
        <li><a href="#top" id="tp_link" class="active">Top</a></li>
        <li><a href="#item2" id="f_link">Item 2</a></li>
        <li><a href="#item3" id="s_link">Item 3</a></li>
        <li><a href="#item4" id="c_link">Item 4</a></li>
        <li><a href="#bottom" id="sm_link">Botton</a></li>
      </ul>
    </nav>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

【讨论】：

我们尝试关闭 Stack Overflow 上的重复问题。如果问题足够相似以至于您的答案适用于两者，则应将其中一个问题作为重复问题关闭。

【解决方案2】：

最好的方法是将背景设置为rgba() 值，其中“a”代表alpha 或不透明度。

.animate {
    background: rgba(0, 0, 255, 0.4);
}

不过，IE8 不支持此功能。

编辑：对于淡入淡出效果，添加以下 CSS（这里是 Fiddle）：

#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

【讨论】：

但我如何为淡入设置动画？
我用一些可能有帮助的信息编辑了我的答案。