<script src="js/jquery-1.8.3.js"></script>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 300px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
}
ul>li {
width: 100px;
height: 60px;
margin-top: 20px;
text-align: center;
float: left;
overflow: hidden;
}
ul>li>img {
width: 32px;
height: 32px;
position: relative;
}
<ul>
<li>
<img src="img/baidu.png" alt="">
<p>百度</p>
</li>
<li>
<img src="img/taobao.png" alt="">
<p>淘宝</p>
</li>
<li>
<img src="img/wy.png" alt="">
<p>网易</p>
</li>
</ul>
$(function() {
//监听li的移入事件
$("li").mouseenter(function() {
$(this).children("img").animate({
top: -50
}, 1000, function() {
//将图标往下移动
$(this).css("top", "50px");
//将图片复位
$(this).animate({
top: 0
}, 1000);
});
});
});