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

来源：互联网发布：工作流程梳理软件编辑：程序博客网时间：2024/05/17 22:57

<!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>

0 0