jq动画
2018-10-30 本文已影响0人
sunflower_07
代码呈上，多多指教：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 1200px;
margin: 50px auto;
}
.box_li {
width: 200px;
height: 200px;
float: left;
}
ul .box_li:nth-child(1) {
background-color: pink;
background: url(1.jpg) no-repeat center;
background-size: 100% 100%;
}
ul .box_li:nth-child(2) {
background-color: pink;
background: url(2.jpg) no-repeat center;
background-size: 100% 100%;
}
ul .box_li:nth-child(3) {
background-color: pink;
background: url(3.jpg) no-repeat center;
background-size: 100% 100%;
}
ul .box_li:nth-child(4) {
background-color: pink;
background: url(4.jpg) no-repeat center;
background-size: 100% 100%;
}
ul .box_li:nth-child(5) {
background-color: pink;
background: url(5.jpg) no-repeat center;
background-size: 100% 100%;
}
ul .box_li:nth-child(6) {
background-color: pink;
background: url(6.jpg) no-repeat center;
background-size: 100% 100%;
}
.op{
width: 100%;
height: 100%;
opacity: 0.4;
background-color: black;
}
h1{
color: #fff;
width: 50px;
margin: 0 auto;
display: block;
font-size: 26px;
word-wrap:break-word;
letter-spacing: 20px;
}
</style>
<body>
<div class="box">
<ul>
<li class="box_li">
<div class="op">
<h1>阳光</h1>
</div>
</li>
<li class="box_li">
<div class="op">
<h1>正好</h1>
</div>
</li>
<li class="box_li">
<div class="op">
<h1>,</h1>
</div>
</li>
<li class="box_li">
<div class="op">
<h1>微风</h1>
</div>
</li>
<li class="box_li">
<div class="op">
<h1>不燥</h1>
</div>
</li>
<li class="box_li">
<div class="op">
<h1>。</h1>
</div>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$(".box_li").hover(function() {
$(this).stop().animate({ "width": '400px' }, 300).siblings().stop().animate({ "width": '160px' }, 200);
$(this).find(".op").hide();
},function(){
$(this).stop().animate({ "width": '200px' }, 200).siblings().stop().animate({ "width": '200px' }, 200);
$(this).find(".op").show();
})
</script>
</body>
</html>
结果
