javascript - JQuery 淡入/淡出导致其他 DIV 闪烁

Question

我为我们的网站创建了一个简单的登陆页面，它基本上是一个占据整个页面的图像和一个顶部的导航栏，它位于顶部，带有 .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 */
}