网页中经常会见到图片沿水平方向、竖直方向移动，图片动态放大、缩小，图片展开、收缩等功能，在jQuery中可以用animate()函数很方便的实现该功能，具体参考代码如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function s(){
var div=$("#div1");
div.animate({left:'350px'},"slow");
});
$("#b2").click(function(){
$("#div2").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("#b3").click(function(){
$("#div3").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
$("#b4").click(function(){
$("#div4").animate({
height:'toggle'
});
});
$("#b5").click(function(){
var div=$("#div5");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$("#b6").click(function(){
var div=$("#div6");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'2em'},"slow");
});
});
</script>
</head>
<body>
<button id="b1">单个动画</button>
<br>
<div id="div1" style="width:80px;height:80px;background-color:green;position:absolute;"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<button id="b2">变换动画</button>
<div id="div2" style="width:80px;height:80px;background-color:green;position:absolute;"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button id="b3">相对值动画</button>
<div id="div3" style="width:80px;height:80px;background-color:green;position:absolute;"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button id="b4">预定义动画</button>
<div id="div4" style="width:80px;height:80px;background-color:green;position:absolute;"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button id="b5">使用队列功能</button>
<div id="div5" style="width:80px;height:80px;background-color:green;position:absolute;"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button id="b6">操作文本</button>
<div id="div6" style="width:80px;height:80px;background-color:green;position:absolute;">hello</div>
</body>
</html>
相关推荐
第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery] 第15课 - jQuery插件 - [精通JavaScript+jQuery]
jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效。
5.6 综合案例分析—动画效果浏览相册中的图片/149 5.6.1 需求分析/149 5.6.2 效果界面/149 5.6.3 功能实现/151 5.6.4 代码分析/155 5.7 本章小结/158 第6章 Ajax在jQuery中的应用/159 6.1 加载异步数据/160 ...
jquery UI主要是用于是UI能变的能容易实现，不需要太多的css，里面已经写了很多类，可以直接使用，常见的图标，方向键头，实现滑动，切换，动画等等都很容易，方便开发在速度上的提升，入门容易，很快上手，
编程开发-综合控件-jquery+css3动画弧形弹出菜单.zip
第10章 jQuery中的动画与效果 第11章 jQuery与AJAX 第12章 回头重看jQuery——核心及工具 第13章 jQuery增强用户体验 第14章 jQuery中使用AJAX跨域操作 第15章 jQuery+PHP动态网站实践 第16章 jQuery键盘操作 第17章...
jQuery有着丰富而绚丽的应用，包括访问部分网页、快速修改网页内容、添加动画、jQuery UI控件的应用、应用AJAX技术、打造自己的脚本框架、开发热门的LBS（Location Based Service）应用、jQuery Mobile开发移动...
Jquery动画; 显示与隐藏效果;jQuery动画;jQuery动画;jQuery动画; 1.显示与隐藏效果 ; 滑动效果;jQuery动画;jQuery动画;jQuery动画;jQuery动画;jQuery动画; 停止动画;jQuery动画; 淡入淡出;jQuery动画;jQuery动画; 4....
的方式讲解了jQuery的核心组件，包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章 和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更 加深入地探讨了...
RIA应用开发：6-jQuery动画效果.ppt
jQuery+css3实现的可爱的3D动画展示效果，界面上的卡通小动物非常可爱，点击有3D效果的文字出现，整体流畅、精美。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发~~~统一开发环境是一款HTML5跨平台一站式...
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
高性能CSS3动画，低端手机上依然可以较流畅运行 详尽完善的官方文档 稳定的API，不间断的更新迭代 搭配框架 jQuery WeUI的jQuery WeUI jQuery的定位：做一把锋利的小刀，而不是做一个笨重的大炮。 jQuery WeUI只是...
其次详细讲解了 jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在 jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例...
jQueryTab是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件，使用简单，采用响应式设计，并支持多种CSS3动画过渡效果。
从基础到进阶学习jQuery，简明易学易懂以易掌握，使读者在短时间类掌握jQuery开发技术.其实，如果你对照本资料认真学的话其实根本不用15天即可达到立竿见影的效果... Jquery是继prototype之后又一个优秀的Javascrī...
自从jQuery面世以来，它以其快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添加动画和 Ajax效果等打动着所有关注它...本CHM手册旨在帮助广大jQuery爱好者快速了解jquery库和jquery开发人员提供一份速查手册。
ASP实例开发源码—jQuery Asp无刷新留言本（带动画效果）.zip ASP实例开发源码—jQuery Asp无刷新留言本（带动画效果）.zip ASP实例开发源码—jQuery Asp无刷新留言本（带动画效果）.zip
掌握使用jQuery实现动画效果的方法 掌握使用jQuery操作元素样式的方法 掌握jQuery事件的使用 掌握jQuery操作属性方法的使用 掌握jQuery操作元素尺寸和位置方法的使用 任务1 认识JQuery 什么是jQuery JavaScript Web...