It should be noted that animate three parameters, and the third is the callback function is executed after the animation is finished, the chain's first execution in front of the animate, and then to the next
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>icon</title>
<link rel="icon" href="../../../img/xiangji.ico" type="img/x-icon">
<script src="../../../jquery-3.4.1.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
#container {
width: 400px;
height: 200px;
border: 1px solid #333;
margin: 10px auto;
}
#container ul {
list-style: none;
/*border: 1px solid #333;*/
height: 80px;
margin-top: 50px;
overflow: hidden;
}
#container ul li {
width: 100px;
height: 80px;
float: left;
text-align: center;
line-height: 120px;
position: relative;
}
#container ul li img {
width: 50px;
height: 50px;
position: absolute;
left: 25px;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><img src="../../../img/baiduico.ico"><a href="JavaScript:;">百度</a></li>
<li><img src="../../../img/sup.ico"><a href="JavaScript:;">sup</a></li>
<li><img src="../../../img/xiangji.ico"><a href="JavaScript:;">相机</a></li>
<li><img src="../../../img/moshushi.ico"><a href="JavaScript:;">magic</a></li>
</ul>
</div>
<script>
$(function () {
$('#container>ul>li>a').on('mouseenter',function () {
let $ico = $(this).siblings();//span标签的兄弟元素
$ico.animate({
top:-50
},500,function () {
$ico.css("top","80px")
}).animate({
top:0
},500)
})
})
</script>
</body>
</html>
