jQuery 动画基础教程


Posted in Javascript onDecember 25, 2008

注意此代码需要用到jquery的js文件,才可以用所以大家可以先下载一个jquery文件,注意调用路径。
代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>jQuery动画基础</title> 
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script> 
<style type="text/css"> 
.theImage{ 
position:relative; 
background:Green; 
width:100px; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$("#btnShow").click(function(){ 
//$("#block").show(1000);//没有参数则没有动画效果 
//$("#block").fadeIn("slow");//根据透明度显示或隐藏 
$("#block").slideDown();//拉下来。只改变高度 
}); 
$("#btnHide").click(function(){ 
//$("#block").hide("normal");//slow,normal,fast 
//$("#block").fadeOut(5000); 
$("#block").slideUp(); 
}); //自定义动画 
$("#btnImage").click(function(){ 
$("#imageDiv").animate( 
//I 
//移动到的位置,这里的位置是相对与原来的位置 
//top即相对原来的位置向上移动多少距离,没搞明白,结果是向下移动了。 
//{left:"400px",top:"100px"}, 
//3000 
//II 
{left:"+=50",width:"300px",height:"200px"},//改变位置的同时改变宽度高度 
3000 
); 
}); 
//同时执行两个动画,执行完一个,然后接着执行另一个。 
$("#btnImage").click(function(){ 
$("#imageDiv").animate( 
{left:"100px",width:"30px",height:"20px"}, 
3000, 
function(){alert('callback函数');}//动画结束后要执行的函数 
); 
}); 
}); 
</script> 
</head> 
<body> 
<div> 
<button id="btnShow"> Show</button> 
<button id="btnHide">Hide</button> 
<div id="block" style="background:#369; width:150px; height:100px; ">Hello!</div> 
<button id="btnImage">moveImage</button> 
<div id="imageDiv" class="theImage">image</div> 
<div>hi</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jquery与prototype框架的详细对比
Nov 21 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
javascript jQuery插件练习
Dec 24 #Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 #Javascript
javascript 网页跳转的方法
Dec 24 #Javascript
javascript prototype,executing,context,closure
Dec 24 #Javascript
JavaScript 事件参考手册
Dec 24 #Javascript
javascript XML数据显示为HTML一例
Dec 23 #Javascript
window.location和document.location的区别分析
Dec 23 #Javascript
You might like
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
JAVA中的关键字有什么特点
2014/03/07 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
人事档案接收函
2014/01/12 职场文书
买房子个人收入证明
2014/10/12 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
高中教师个人工作总结
2015/02/10 职场文书
应聘教师求职信范文
2015/03/20 职场文书
企业计划生育责任书
2015/05/09 职场文书
综治目标管理责任书
2015/05/11 职场文书