javascript - 如何让一个元素淡出而另一个元素在窗口加载时淡入其位置？

Question

我正在尝试为我的网站创建启动画面，并且我制作了一个进度条以使其看起来更漂亮。我还有一些链接供用户登录或注册。

我想要实现的是，在窗口加载后，让进度条运行 4 秒，然后在 0.5 秒内淡出，然后让链接在 0.5 秒内淡入它的位置，持续一段时间用户可以继续之前总共 5 秒。

我整理了一些代码来使这项工作主要使用:

setTimeout();

但尽管就我和 Google Chrome 控制台而言都没有错误，但没有产生任何可见的结果。

如何修复我的代码以使其正常工作？任何建议将不胜感激。我更喜欢纯 JavaScript 的解决方案，但如果没有其他方法，我也会对 jQuery 感到满意。

为了帮助你，我为你组装了一个演示here .

Answer 1

毫无疑问要改用jquery。 FadeIn 和 fadeOut 很容易做到:

$(window).load(function(){

  var t=setTimeout(function(){
  $("#progressbar").fadeOut(500);
  $("#splashscreen-links").fadeIn(500);
  },4000)
  
})

@-webkit-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}

@-moz-keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

@-ms-keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

@-o-keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

@keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

#progressbar {
    /* Dimensions */
    width: 250px;
    height: 16px;
    overflow: hidden;
    
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 5px;
    padding-top: 4px;
    padding-left: 17px;
    
    /* Styling */
    background: #E6E6E6;
    border:1px solid #bbb;
    border-radius:0px;
}

#progressbar:after {
    content: " ";
    display: block;
    width: 120px;
    top: -50%;
    height: 250%;
    position: absolute;
    animation: greenglow 2s linear infinite;
    -webkit-animation: greenglow 2s linear infinite;
    z-index: 2;
    background: #1CAE30;
}

#splashscreen-links {
    /* Text */
    color: #999999;
    font-family: "Arial";
    text-decoration: none;
    
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 5px;
    padding-top: 4px;
    padding-left: 17px;
    
    /* Visibility */
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progressbar"></div>
<p id = "splashscreen-links"><a>Login</a>&nbsp;&bull;&nbsp;<a>Register</a></p>