版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36818386/article/details/81986573
<script src="js/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0px;
}
ul,li
{
list-style: none;
}
div
{
width: 1000px;
border: 2px solid black;
height: 300px;
margin: 150px auto;
overflow: hidden;
}
div ul li
{
float: left;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="素材/手风琴/images/0.jpg" alt=""></li>
<li><img src="素材/手风琴/images/1.jpg" alt=""></li>
<li><img src="素材/手风琴/images/2.jpg" alt=""></li>
<li><img src="素材/手风琴/images/3.jpg" alt=""></li>
<li><img src="素材/手风琴/images/4.jpg" alt=""></li>
</ul>
</div>
<script>
$(".box").children().children().mouseenter(function () {
$(this).stop(true).animate({width: 560}).siblings().animate({width : 110});
});
</script>