javascript - JQuery Fade In/Out 导致其他 DIV 闪烁

Question

我为我们的网站创建了一个简单的登录页面，它基本上是一个占据整个页面的图像和一个位于顶部的导航栏，顶部带有 0.5 alpha。当我使用 jQuery 淡入/淡出背景时，它也会使这个导航栏淡入/淡出。

我怎样才能解决这个问题？

Javascript：

<script>
$(".loadHome").click(function(e)
{
    e.preventDefault();
    $('#bg-locations').fadeOut('fast');
    $('#bg-features').fadeOut('fast');
    $('#bg-home').fadeIn('fast');
});
$(".loadLocations").click(function(e)
{
    e.preventDefault();
    $('#bg-home').fadeOut('fast');
    $('#bg-features').fadeOut('fast');
    $('#bg-locations').fadeIn('fast');
});
$(".loadFeatures").click(function(e)
{
    e.preventDefault();
    $('#bg-home').fadeOut('fast');
    $('#bg-locations').fadeOut('fast');
    $('#bg-features').fadeIn('fast');
});
</script>

Answer 1

您的 div 在您的标题上淡入/淡出。

将您的#header 样式更改为：

#header {
  height: 210px;
  width: 100%;
  background: rgba(38, 38, 38, .5);
  overflow: hidden;
  text-align: center;
  position: relative; /* Add this line */
}