javascript - div after nav 当动画进入 View 时，div 会淡出一半的导航

Question

我有这个 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 left middle Text”、“COMING SOON”设置动画时，第一个图像重新加载 #pediChair jquery 动画。我希望导航保持固定不做任何事情，只有 TITLE、Subtitle 和 Gallery TopRight 的文本保持固定并且不会消失并重新加载，而另一个在 #pedichair 动画 变为不透明时会执行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%;
}

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

Answer 1

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

此外，我假设您想要 <div id="close">未显示，因为您正在使用 $('#close').fadeIn()让它出现。

要解决在使用不透明度为 1 的动画时控件消失并再次出现的问题，您必须像本例中那样使用 z-index:

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

检查这里的代码: https://jsfiddle.net/737z3ebc/11/