Question

我正在为我的网站制作一个“登陆页面”，我将所有练习都放在那里。我想在几秒钟之后让我的按钮“淡入”。我该怎么做？

这是我的按钮类：.fadeButton

我用jquery来做这件事，让它在几秒钟后变成动画：$( ".fadeButton" ).delay( 6000 );

但我不知道如何让按钮淡入而不是直接显示

Answer 1

试试这个：页面完全加载后，2秒钟后淡入（使用jquery .fadeIn（））按钮

$(window).on('load', function() {
  $('.fadeButton').delay(2000).fadeIn()
})

.fadeButton {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='fadeButton'>Button</button>

Answer 2

最简单的方法可能是使用animate.css（https://daneden.github.io/animate.css/）。然后就像添加一个带有'animated'和'fadeIn'的类到你想要淡入的任何元素一样简单。

Answer 3

在你的css文件中说：

.fadeButton {
    opacity: 0;
    transition: opacity 0.5s;
}

在javascript的onload部分或页面上的某处说：

setTimeout(function(){
    $('.fadeButton').css({'opacity':'1'})
}, 2000);

无需加载其他js库并使您的网站更慢
使用jQuery动画所需的处理能力比css转换大约多10-100倍，这可能会使您的页面负载过重
当您从＆＃34;显示：无＆＃34;开始时，按钮不会占用任何空间，设计会跳跃 - 这就是为什么我更喜欢动画不透明度
请记住，在加载页面时（或从＆＃34; display：none＆＃34;开始）所有动画都从已完成状态开始

Answer 4

试试这个。

$("button").click(function() {
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Demonstrate fadeIn() with different parameters.</p><button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

几秒钟后按钮出现

4 个答案: