Jquery实现简单的动画效果代码


Posted in Javascript onMarch 18, 2012
<!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></title> 
<script src="http://demo.3water.com/jslib/jquery/jquery-1.7.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$("#panel").css("opacity", "0.1");//设置透明度 
$("#panel").click(function () { 
$(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)//在3秒内向右移动400px,高度放大200px,透明度改为1 
.animate({ top: "200px,width:200px" }, 3000) 
.fadeOut("slow"); //以淡出的方式隐藏 
}); 
}) 
</script> 
</head> 
<body> 
<div id="panel" style=" position:relative; background-color:Olive; height:100px; width:100px; border:1px; border-color:Aqua;"> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
js动态切换图片的方法
Jan 20 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 #Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 #Javascript
基于jQuery的弹出框插件
Mar 18 #Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 #Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 #Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 #Javascript
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP insert语法详解
2008/06/07 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python Json数据文件操作原理解析
2020/05/09 Python
python打开文件的方式有哪些
2020/06/29 Python
python3实现飞机大战
2020/11/29 Python
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
大三毕业自我鉴定
2014/01/15 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
护士求职自荐信范文
2015/03/04 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
社区服务活动感想
2015/08/11 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android