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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
基于angular实现树形二级表格
Oct 16 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
PHP自动生成月历代码
2006/10/09 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
Prototype String对象 学习
2009/07/19 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
Python random模块常用方法
2014/11/03 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python Flask-web表单使用详解
2017/11/18 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
Python如何将模块打包并发布
2020/08/30 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
酒店保安领班职务说明书
2014/03/04 职场文书
片区教研活动总结
2014/07/02 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
纪检监察立案决定书
2015/06/24 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技