<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.all{
width: 100%;
height: 1000px;
}
.box{
display: flex;
justify-content: center;
align-items: center;
width: 550px;
height:300px;
margin: 0 auto;
}
.box .con{
position: relative;
}
.box .con span{
position: absolute;
top:0;
left:0;
}
.box .con img{
width: 50px;
height: 200px;
}
.box .on img{
width:400px;
height: 200px;
}
</style>
</head>
<body>
<div class="all">
<div class="box">
<div class="con on">
<span>画风1</span>
<img src="img/1.jpg" alt="">
</div>
<div class="con">
<span>画风2</span>
<img src="img/2.jpg" alt="">
</div>
<div class="con">
<span>画风3</span>
<img src="img/3.jpg" alt="">
</div>
<div class="con">
<span>画风4</span>
<img src="img/4.jpg" alt="">
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(".con").mouseover(function(){
if($(this).hasClass("on")){return}
$(".on").animate({width:"50px"},400,function(){
$(this).removeClass("on");
})
$(this).addClass("on").animate({width:"400px"},400)
})
})
</script>
</body>
</html>
