<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0px;
margin:0px;
}
.li_list{
float:left;
overflow:hidden;
list-style:none;
width:100px;
height:300px;
}
.block{
width:602px;
height:300px;
float:left;
text-align:center;
line-height:300px;
background-color: rgba(255, 165, 0, 0.38);
}
.back{
width:500px;
height:300px;
border:1px solid #ccc;
float:left;
}
.li_list img{
width:100%;
height:100%;
}
.li_mo{
width:602px;
}
.animal{
float:left;
width:100px;
height:300px;
display:inline-block;
}
</style>
</head>
<body>
<ul>
<div class="clear"></div>
<li class="li_list li_mo" >
<div class="block">
<span class="animal">萌宠</span>
<div class="back">
<img src="7.25/img/0.jpg">
</div>
</div>
</li>
<li class="li_list"><div class="block"><span class="animal">萌宠</span><div class="back"><img src="7.25/img/1.jpg"></div></div></li>
<li class="li_list"><div class="block"><span class="animal">萌宠</span><div class="back"><img src="7.25/img/2.jpg"></div></div></li>
<li class="li_list"><div class="block"><span class="animal">萌宠</span><div class="back"><img src="7.25/img/3.jpg"></div></div></li>
</ul>
<script src="7.25/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(function(){
$(".li_list").each(function(){
//each遍历
$(this).mouseenter(function(){
$(this).stop().animate({"width":"600px"},500,"linear").siblings().stop().animate({"width":"100px"},500,"linear")
})//当鼠标进入时,让改元素撑开,而其他的元素合住,stop()用来防止当鼠标晃动多次时带来的延迟的bug
})
})
</script>
</body>
</html>
一个手风琴效果的jquery动画
最新推荐文章于 2022-04-19 09:02:34 发布