<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>动画案例_JQ</title>
<meta charset="utf-8"/>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{
margin:0;
padding:0;
}
#move{
padding:10px;
width:300px;
background:#ccc;
margin:10px auto;
border:1px solid #000;
}
#move a{
display:inline-block;
width:58px;
height:40px;
border:1px solid #ddd;
border-radius:3px;
background-color:#fff;
text-align:center;
margin:10px 17px;
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="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#move a').mouseenter(function(){
$(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){
//300是速度值，毫秒
$(this).css({top:"30px"});
$(this).animate({top:"20px",opacity:"1"},200)
})
})
})
</script>
</head>
<body>
<div id="move">
<a href=""><i><img src="images/caipiao.png" alt="" /></i><p>彩票</p></a>
<a href=""><i><img src="images/movie.png" alt="" /></i><p>电影</p></a>
<a href=""><i><img src="images/food.png" alt="" /></i><p>外卖</p></a>
<a href=""><i><img src="images/game.png" alt="" /></i><p>游戏</p></a>
<a href=""><i><img src="images/insure.png" alt="" /></i><p>保险</p></a>
<a href=""><i><img src="images/travel.png" alt="" /></i><p>旅行</p></a>
</div>
</body>
</html>
分享到：
相关推荐
实现这一功能的关键代码包括jQuery的选择器、事件处理函数以及动画方法。例如，开发者可能使用了`hover()`函数来监听鼠标悬停事件，然后通过`slideToggle()`或`fadeIn()`/`fadeOut()`方法实现下拉菜单的显示与隐藏。...
本资源“jquery动画背景图片.rar”显然是一个利用jQuery实现背景图片动画效果的实例。下面我们将深入探讨如何在C#环境下，结合jQuery来创建这种动态背景图片效果。 首先，jQuery的动画功能主要通过几个核心方法来...
jQuery翻盖动画数字时钟是一种基于JavaScript库jQuery实现的创新时钟展示方式，它通过翻转数字的效果来显示当前时间，既有趣又富有交互性。这种时钟设计适合那些希望在网页或应用中添加独特时间显示功能的初学者。...
过渡效果是实现动画的关键部分，它告诉浏览器如何在两个状态之间平滑地变化。在jQuery中，可以使用`.animate()`方法结合CSS的`transition`属性来创建动画效果。 JavaScript部分，可能在js文件夹中的main.js或类似的...
为什么说是新老结合呢，首先，页面是基于jQuery实现的插件 其次，展现的动画效果依赖于CSS3动画，so，新老结合实现的动画效果 使用方法： 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到...
在"唯美表白动画"项目中，jQuery被用来实现页面元素的动态展示和交互效果。例如，通过`.fadeIn()`和`.fadeOut()`方法可以实现元素的淡入淡出效果，`.animate()`函数则可以自定义复杂的平滑动画，增加视觉吸引力。...
【jQuery带动画效果图片轮播切换焦点图代码】是一种常见的网页设计技术，它利用JavaScript库jQuery来实现动态的、有视觉吸引力的图片展示效果。在网页设计中，焦点图组件通常用于展示产品、新闻或者任何需要突出显示...
现在我们使用jQuery和jQuery UI来实现动画效果。首先，为“添加”按钮添加点击事件监听器，动态创建一个新的元素，并使用`fadeIn`动画将其添加到容器中： ```javascript $(document).ready(function() { $("#add")...
首先，` AnimatedFormSwitching `可能是这个项目中的主要JavaScript文件，它包含了实现动画切换效果的jQuery代码。在网页中，当用户填写完一个表单字段或者点击某个按钮时，这个脚本会触发动画，平滑地过渡到下一个...
本篇文章将聚焦于如何使用jQuery实现图像旋转动画，这在网页动态效果展示中十分常见。 首先，我们需要理解jQuery的核心概念。jQuery对象是jQuery库中的核心，它封装了DOM元素，提供了丰富的API来操作这些元素。在...
在网页设计中，导航条是不可或缺的部分，它帮助用户轻松地在网站的各个部分之间穿梭。...通过学习和实践其中的示例，开发者可以掌握如何利用jQuery实现富有动态感和吸引力的导航条，从而提高网站的整体质量。
"jQuery实现的平滑动画导航.zip" 文件包正是为实现这一目标而设计的，它包含了一个使用jQuery编写的平滑动画导航菜单。 首先，我们来理解jQuery的核心概念。jQuery通过简化DOM操作、事件处理、动画效果以及Ajax交互...
在本压缩包"jQuery部分酷炫动画代码"中，包含了多种适用于HTML5和其他场景的动态效果，这些动画可以为网站增添视觉吸引力，提升用户体验。下面将详细探讨jQuery动画原理以及如何运用这些代码。 首先，jQuery的动画...
对于学习网页开发和JavaScript特效的初学者，这是一个很好的实践案例，可以帮助理解并掌握如何利用jQuery实现动态图片效果。同时，对于设计师和开发者，这样的效果也可以用于各种项目，如产品展示、摄影集网站等，以...
**jQuery计数器动画特效详解** 在Web开发中，动态效果常常能提升用户体验，使得页面更具吸引力。"jQuery计数器动画特效"就是一个很好的例子，它利用jQuery库的强大功能，结合Bootstrap网格系统，为数字计数添加了...
本知识点将详细阐述如何利用jQuery实现一个具有多级动画效果的菜单。 首先，要实现一个具有多级动画效果的菜单，需要掌握以下几个核心知识点： 1. jQuery基础语法和选择器的使用。这是实现菜单效果的前提，通过...
"jQuery文字动画导航"是一个利用JavaScript库jQuery实现的创新性导航菜单，它通过动态的文字效果来提升用户体验，使得导航更加吸引人且易于使用。在这个项目中，我们将探讨jQuery的基本用法，以及如何创建文字动画...
在JavaScript部分，我们主要关注jQuery的选择器、事件绑定和动画方法。首先，我们需要选择所有的面板标题，并为它们添加点击事件监听器。当用户点击标题时，事件处理函数会被调用。在这里，我们需要判断当前点击的...
在这个“Jquery实现数据左右移动Demo”中，我们将深入探讨如何利用jQuery来实现动态的数据展示，特别是在一个可能需要数据左右移动的场景，如轮播图或卡片式布局。 首先，我们需要理解jQuery的基本用法。jQuery通过...
- `css`：这个文件夹可能包含了实现动画效果的CSS样式表，其中可能定义了动画的关键帧或者元素的初始状态和最终状态。 - `js`：这个文件夹可能包含jQuery脚本，实现了页面滚动监听和动画控制逻辑。 - `dist`：通常...