废话不多说,直接上图 **↓**
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQueryUI</title>
<style>
*{
margin: 0px;
border: 0px;
}
body{
background-color: #ffbebe;
}
.outer{
width: 460px;
height: 300px;
position: absolute;
display: flex;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
li{
list-style: none;
}
div{
width: 50px;
height: 300px;
margin-right: 10px;
border-radius: 20px;
}
.d1{
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
.d2{
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
.d3{
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
.d4{
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
.d5{
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
.d6{
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
</style>
</head>
<body>
<ul class="outer">
<li>
<div class="d1" style="width: 250px;"></div>
</li>
<li>
<div class="d2"></div>
</li>
<li>
<div class="d3"></div>
</li>
<li>
<div class="d5"></div>
</li>
<li>
<div class="d6"></div>
</li>
</ul>
</body>
<!-- 导入js库 -->
<script src="./js/jquery-1.12.3.js"></script>
<script>
$('div').mouseenter(function(){
//jQuery代码
$(this).stop().animate({width: 250}, 300, 'swing');
$('div').not(this).stop().animate({width: 50}, 300, 'swing');
});
</script>
</html>
两行代码(手动狗头):
$(this).stop().animate({width: 250}, 300, 'swing');
$('div').not(this).stop().animate({width: 50}, 300, 'swing');
希望本文对兄台有所帮助!!