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 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，但它仍然会产生相同的效果。

Answer 1

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

另外，我假设您希望<div id="close">未显示，因为您正在使用$('#close').fadeIn()来显示它。

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

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

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

导航div在动画进入视图时淡出导航的一半

1 个答案: