<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
}
.wrapper{
width: 100%;
height: 400px;
border: 2px solid;
box-sizing: border-box;
}
.list{
width: 100%;
height: 100%;
list-style: none;
overflow: hidden;
}
.list>li{
float: left;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="list">
</ul>
</div>
<script src="jQuery-3.3.1.js"></script>
<script>
let colors = ["red","yellow","green", "cyan", "pink","hotpink", "blue", "yellowgreen","greenyellow", "skyblue"];
colors.forEach(item => {
$('.list').append(`<li style="background-color:${item}; width:${100 / colors.length}%"></li>`)
}) ;
$(document).on('mouseenter','.list>li',function () {
let that = $(this);
that.stop().animate({
width:'100%'
},500);
that.siblings().stop().animate({
width:'0'
},500)
});
$(document).on('mouseleave','.list>li',function () {
$('.list>li').stop().animate({
width:100 / colors.length + '%'
},500)
})
</script>
</body>
</html>
