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();
});

叠加div并在单击链接后逐渐消失

1 个答案: