javascript - 覆盖一个 div 并让它在单击链接后消失

Question

所以我需要这个 div 在加载时覆盖在一个更复杂的网站上，并在单击时消失，就像各种欢迎启动画面。我仔细看了其他人的回复，但我不太了解它的 jquery 方面。不幸的是我没有足够的经验。我得到了一个在点击时消失的叠加图像，但是这个 div 有一个单独的 div，带有一个输入图像，使用 webkit 淡入和淡出，所以使用整个 div 是我正在努力实现的。这是我当前的布局(减去更复杂的网站)

HTML:

<div id="wrapper_index">
<div id="enter_button"> <a href="home.html"><img src="images/enter_button.png" width="138" height="50" class="withfadein"/></a>
</div>
</div>

CSS:

#wrapper_index {
    height: 686px;
    width: 1024px;
    background-color: #000;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    background-image: url(images/entry_image-01.png);
    background-repeat: no-repeat;
    position: relative;
}
#enter_button {
    width: 140px;
    position: absolute;
    left: 434px;
    top: 501px;
}
.withfadein{
    opacity: 0;
    -webkit-animation: load 20s linear forwards;
}

@-webkit-keyframes load{
    from{opacity: 0;}
    to{opacity: 1;}
}
.withfadein2{
    opacity: 0;
    -webkit-animation: load 10s linear forwards;
}

@-webkit-keyframes load{
    from{opacity: 0;}
    to{opacity: 1;}
}
.withfadeout { 
-webkit-transition: all 2s ease-in-out; 
-moz-transition: all 2s ease-in-out; 
-ms-transition: all 2s ease-in-out; 
-o-transition: all 2s ease-in-out; 
transition: all 2s ease-in-out; 
} 
.withfadeout:hover { 
-webkit-opacity: 0.25; 
-moz-opacity: 0.25; 
opacity: 0.25; 
}

Answer 1

您可以使用 jQuery 相对轻松地做到这一点，并且您可以忘记所有 CSS 动画。

演示:http://jsfiddle.net/robschmuecker/p6vKU/

JS:

$('#enter_button').on('click', function () {
    $('#wrapper_index').fadeOut();
});