gpt4 book ai didi

javascript - 5秒后添加动画类并执行

转载 作者:行者123 更新时间:2023-11-28 05:05:18 25 4
gpt4 key购买 nike

我试图在网站上创建一个动画卡片,所以我尝试在5秒后添加一个动画类,但除非我做一个警告框之类,否则该类的内容才会生效。这是我的代码。



$(document).ready(
function(){
window.setTimeout(function() {
$("#webDesign").addClass("animated");
$("#webDesign").addClass("bounceOutDown");
location.reload();
}, 5000);
});

#webDesign{
height:20em;
background-color:white;
opacity:0.8;
border:1.5px solid black;
border-radius:30px;
}

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<head>
<body>
<div id="webDesign" class="card text-center col-md-6 col-md-offset-3">
<h2>Web Desgin</h2>
<h5>Through paying close attention to our customer's needs we make the websites that fit them best.</h5>
<img style="width:40%;"src="pictures/webDesign.png" />
</div>
</body>





这是我第一次使用该网站,任何人愿意提供的帮助将不胜感激。

最佳答案

如果在“动画”类上定义过渡,并在“ bounceOutDown”上生效,则需要将添加的类放在单独的超时中,否则两个类都将加在一起,并且从浏览器的角度来看,没有过渡。不确定,因为您没有粘贴这些类,但是可以这样尝试:

$(document).ready(function(){
setTimeout($("#webDesign").addClass, 5000, "animated");
setTimeout($("#webDesign").addClass, 5010, "bounceOutDown");
setTimeout(location.reload, 5020);
});


两次操作之间10毫秒就可以了。

关于javascript - 5秒后添加动画类并执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39861093/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com