日常记录一下。
<!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>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/animate.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<style>
.yc{
animation-duration: 2s; /*动画持续时间 */
}
</style>
</head>
<body>
<div class="xs">
<div class="xs-clocs"></div>
<!-- 默认隐藏 -->
<div class="yc">
<div class="yc-clocs"></div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>js:
$(document).ready(function(){
//打开弹窗
$('.xs-clocs').click(function(){
$(".yc").css("display","block");
$(".yc").removeClass('animated flipOutX').addClass('animated flipInX');
});
//关闭弹窗
$('.yc-clocs').click(function(){
$(".yc").removeClass('animated flipInX').addClass('animated flipOutX');
setTimeout(function () {
$(".yc").css("display","none");
},2000)
});
})
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
