版权声明:转载本文,请附录原文地址,如果错误,请联系我。 https://blog.csdn.net/qq_19880197/article/details/86679665
HTML
<div id="box">
<ul>
<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>
CSS
*{
padding: 0;
margin: 0;
}
ul li{
list-style: none;
}
div{
width: 1000px;
border: 1px solid red;
height: 350px;
margin: 150px auto;
overflow: hidden;
}
div ul li{
float: left;
width: 200px;
height: 350px;
}
jquery
<script src="jQuery/jquery-1.12.3.js"></script>
<script>
$(function () {
$("div li").mouseenter(function () {
$(this).stop().animate({width:800}).siblings().stop().animate({width:200})
}) .mouseleave(function () {
$("div li").stop().animate({width:240});
});
});
</script>