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实现居中弹出层代码
Aug 25 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
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多文件上传功能实现原理及代码
2013/04/18 PHP
php上传文件常见问题总结
2015/02/03 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
python函数局部变量用法实例分析
2015/08/04 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
如何把python项目部署到linux服务器
2020/08/26 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
毕业生找工作的自我评价
2013/10/18 职场文书
农民入党思想汇报
2014/01/03 职场文书
红旗方阵解说词
2014/02/12 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书