脚本宝典收集整理的这篇文章主要介绍了自定义弹出层.css 和 .animate的区别，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=Edge">
<title>Document</title>
<style>
.message{
position: fixed;
top: -50px;
left: 50%;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #00aaee;
color: #fff;
box-sizing: border-box;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="message">hello</div>
<button id="btn">btn</button>
</body>
</html>
<script src="http://cdn.bootcss.COM/jquery/3.2.1/jquery.min.js"></script>
<script>
function fade(text){
$('.message').html(text);
//.css无动画过渡效果
// $('.message').css({
// top: "50px",
// })
// setTimeout(() => {
// $('.message').css({
// top: "0"
// })
// },2000)
// .animate有动画过渡效果
$('.message').animate({
top: "50px"
})
setTimeout(() => {
$('.message').animate({
top: "-50px"
})
},2000)
}
$('#btn').click(() => {
fade("hello")
})
</script>以上是脚本宝典为你收集整理的自定义弹出层.css 和 .animate的区别全部内容，希望文章能够帮你解决自定义弹出层.css 和 .animate的区别所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。