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 相关文章推荐
js防止表单重复提交的两种方法
Sep 30 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 Javascript
vue实现锚点定位功能
Jun 29 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错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
js 通用订单代码
2013/12/23 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
Tensorflow简单验证码识别应用
2017/05/25 Python
python模块导入的细节详解
2018/12/10 Python
基于python实现查询ip地址来源
2020/06/02 Python
Python LMDB库的使用示例
2021/02/14 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
自我鉴定写作要点
2014/01/17 职场文书
本科生就业推荐信
2014/05/19 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
财务稽核岗位职责
2015/04/13 职场文书
与死神共舞观后感
2015/06/15 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android