javascript - 导航后的div当动画进入视线时div减弱导航的一半

我有这个HTML标记：
这是我的代码笔：https://codepen.io/enavu/pen/WzevNm

<div id="close">
<div class="nav">
        <img src="https://i.imgur.com/gxDHDbG.png" alt="gb" class="centered">
        <div class="centered soon">COMING SOON</div>
        <a href="index.html" class="nav-logo  link-brand" data-text="">
        <span class="link-brand-inner">TITLE</span>
        <p class="nav-slogan">SubTitle</p>
        </a>
        <span class="nav-top-line"></span>
        <div class="nav-item nav-work">
            <a href="gallery.html">
            <span class="link-brand-inner">Gallery TopRight</span>
            </a>
        </div>
        <div class="mid-nav">
            <div class="nav-about">
                <span class="nav-about-line"></span>
                <span class="link-brand-inner">Sideways left middle Text</span>
            </div>
        </div>
    </div>
    <div class="" id="sliderContainer">
        <div id="pediChair" class="slider-display-none">
            <img src="assets/photos/image1.jpg">

        </div>
        <div id="maniTable" class="slider-display-none">
            <img src="assets/photos/image2.jpg">

        </div>
        <div id="mnstrmGear" class="slider-display-none">
        <img src="assets/photos/image3.jpg">

        </div>

</div>
</div>

当我尝试为img，#pediChair和“ Sideways左中间文本”，“即将到来”制作动画时，第一个图像会用#pediChair jquery动画重新加载。我希望导航固定不动，而只是TITLE，Subtitle和Gallery TopRight的文本保持固定，并且不会消失并重新加载，而当#pedichair animates变为不透明1时，另一个保持不变。

我的jQuery方法是这样的：

setTimeout(resetCSS, 6800);

function resetCSS() {
    $('#close').fadeIn("slow", function(){
        sliderLoop();
    });
}

function sliderLoop(){
    $('#pediChair').animate({opacity: 1}, 3000);
}

这是我的CSS：

.nav-logo {
    position: absolute;
    z-index: 100;
    left: 24px;
    top: 20px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 22px;
    font-size: 1.57143rem;
    line-height: 1
}
.slider-display-none {
    opacity:0;
}
.nav-slogan {
    position: absolute;
    font-size: 10px;
    font-size: 0.71429rem;
    line-height: 1;
    letter-spacing: 0.11em;
    left: 0;
    top: 24px;
    font-weight: 700;
    text-transform: uppercase
}


.nav-top-line {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 2px;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    color: white;
    background-color: currentColor;
    pointer-events: none;
    height: 30px;
}

.nav-work {
    top: 25px;
    right: 50px;
}

.nav-item {
    position: absolute;
    z-index: 100;
    text-transform: uppercase;
    font-size: 11px;
    font-size: 0.78571rem;
    line-height: 2.27273;
    letter-spacing: 0.11em;
    font-weight: 700;
}

.link-brand-inner {
    color: white
}

.link-brand {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

.nav-about {
    position: relative;
    transform: rotate(270deg);
}

.nav-about-line {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 2px;
    color: white;
    background-color: currentColor;
    height: 10px;
}

.mid-nav {
    position: absolute;
    top: 50%;
}

我尝试将z-index用于类nav和id sliderContainer，但是它仍然具有相同的效果。

最佳答案

我已经模拟了这种情况，当pediChair出现时，导航保持固定。

另外，我假设您不想显示<div id="close">，因为您正在使用$('#close').fadeIn()使其显示。

要解决使用不透明度为1的动画时控件消失并再次出现的问题，您必须像以下示例一样使用z-index：

.nav > * {
  z-index: 1;
}

在此处检查代码：
https://jsfiddle.net/737z3ebc/11/