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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
常用js脚本
Dec 03 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
深入理解PHP中的count函数
2016/05/31 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
How to Auto Include a Javascript File
2007/02/02 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
AngularJS语法详解
2015/01/23 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
layui文件上传实现代码
2017/05/20 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
python标准库OS模块详解
2020/03/10 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
委托证明的格式
2014/01/10 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
培训讲师开场白
2015/06/01 职场文书
毕业证明模板
2015/06/19 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
使用pytorch实现线性回归
2021/04/11 Python
利用python做表格数据处理
2021/04/13 Python
Django实现聊天机器人
2021/05/31 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
Mysql忘记密码解决方法
2022/02/12 MySQL