您的位置：首页 > Web前端 > JQuery

物体运动-jQuery-图标向上运动再从下方出现运动到原位置

2017-05-12 17:21 155 查看

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>图标动画效果演示</title>
<style>
*{margin: 0;padding: 0;}
#move{height:200px;width:300px;margin: 10px auto;background: #eee;border: 1px solid #ccc;}
#move a{display:inline-block;height:25px;width:58px;background: #fff;margin: 10px 17px;border: 1px solid #ddd;border-radius: 3px;text-align: center;position: relative; padding-top:40px;color:#9c9c9c; font-size:12px; text-decoration:none;line-height:25px;overflow: hidden;}
#move a i{position:absolute;top:20px;left:0;display:inline=block; width:100%;text-align:center;filter:alpha(opacity=100);opacity:1;}
#move a:hover{color:#F00;}
#move img{border:none;}
</style>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>

</head>
<body>
<div id="move">
<a href="#"><i><img src="images/food.png"/></i><p>食品</p></a>
<a href="#"><i><img src="images/game.png"/></i><p>游戏</p></a>
<a href="#"><i><img src="images/insurance.png"/></i><p>保险</p></a>
<a href="#"><i><img src="images/lottery.png"/></i><p>日期</p></a>
<a href="#"><i><img src="images/movie.png"/></i><p>电影</p></a>
<a href="#"><i><img src="images/travel.png"/></i><p>旅行</p></a>
</div>
</body>
</html>

<script type="text/javascript">
$(function(){
$('#move a').mouseenter(function(){
$(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){
$(this).css({top:"30px"});
$(this).animate({top:"20px",opacity:"1"},200);
});
})
})
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航