页面加载后淡入按钮

时间:2018-05-23 16:16:08

标签: jquery css button fadein

我希望此按钮在加载页面后延迟播放。

我如何在jQuery中执行此操作?如何在延迟后我的其他按钮也会消失?

HTML:

<button class="button button2" id="button">Enter</button>

CSS:

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-left: 500px;
margin-top: 150px;
transition-duration: 0.4s;
cursor: pointer;
font-weight: 5000;
}

.button2 {
background-color: transparent; 
color: white; 
border: 2px solid white;
}

.button2:hover {
background-color: white;
color: black;
font-weight: 800;
}

1 个答案:

答案 0 :(得分:0)

更改类选择器,或复制但是您希望使用不同的元素。您可以用逗号分隔多个类。 500表示半秒等待时间,您还可以在fadeIn方法中添加一个值来更改速度。

$(function(){    
    setTimeout(function(){ 
        $('.button2').fadeIn();
    }, 500);
});