编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery学习7 操作JavaScript对象和集合的函数

Feb 07 Javascript

使用javascript控制cookie显示和隐藏背景图

Feb 12 Javascript

jquery单行文字向上滚动效果示例

Mar 06 Javascript

jQuery 选择器详解

Jan 19 Javascript

jQuery实现在最后一个元素之前插入新元素的方法

Jul 18 Javascript

浅谈时钟的生成(js手写简洁代码)

Aug 20 Javascript

JavaScript实现大图轮播效果

Jan 11 Javascript

关于vuex的学习实践笔记

Apr 05 Javascript

vuejs实现本地数据的筛选分页功能思路详解

Nov 15 Javascript

jQuery中内容过滤器简单用法示例

Mar 31 jQuery

Vue实现购物车的全选、单选、显示商品价格代码实例

May 06 Javascript

jsonp格式前端发送和后台接受写法的代码详解

Nov 07 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 mssql 时间格式问题

2009/01/13 PHP

php实现的DateDiff和DateAdd时间函数代码分享

2014/08/16 PHP

PHP PDOStatement::setFetchMode讲解

2019/02/03 PHP

[原创]js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结

2007/03/12 Javascript

Javascript string 扩展库代码

2010/04/09 Javascript

javascript之学会吝啬精简代码

2010/04/25 Javascript

ASP.NET中基于JQUERY的高性能的TreeView补充

2011/02/23 Javascript

eval与window.eval的差别分析

2011/03/17 Javascript

Node.js开发指南中的简单实例(mysql版)

2013/09/17 Javascript

js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

2014/04/29 Javascript

javascript判断元素存在和判断元素存在于实时的dom中的方法

2017/01/17 Javascript

Vue关于数据绑定出错解决办法

2017/05/15 Javascript

javascript和php使用ajax通信传递JSON的实例

2018/08/21 Javascript

js实现下拉框二级联动

2018/12/04 Javascript

详解js动态获取浏览器或页面等容器的宽高

2019/03/13 Javascript

layui使用数据表格实现购物车功能

2019/07/26 Javascript

微信小程序实现搜索功能

2020/03/10 Javascript

[01:23:45]DOTA2-DPC中国联赛正赛 CDEC vs Dragon BO3 第一场 1月22日

2021/03/11 DOTA

微信用脚本查看是否被微信好友删除

2016/10/28 Python

Python中的函数式编程:不可变的数据结构

2018/10/08 Python

Python中new方法的详解

2019/01/15 Python

Python学习笔记基本数据结构之序列类型list tuple range用法分析

2019/06/08 Python

python右对齐的实例方法

2020/07/05 Python

python中四舍五入的正确打开方式

2021/01/18 Python

美国最大的船只买卖在线市场：Boat Trader

2018/08/04 全球购物

专注澳大利亚特产和新西兰特产的澳洲中文网：0061澳洲制造

2019/03/24 全球购物

Java中有几种方法可以实现一个线程？用什么关键字修饰同步方法？stop()和suspend()方法为何不推荐使用？

2015/08/04 面试题

实习生自我鉴定范文

2013/12/05 职场文书

安全生产目标责任书

2014/04/14 职场文书

市场营销专业自荐书

2014/06/10 职场文书

横幅标语大全

2014/06/17 职场文书

文明单位汇报材料

2014/12/24 职场文书

2015年学校减负工作总结

2015/05/19 职场文书

煤矿施工安全协议书

2016/03/22 职场文书

Redis高可用集群redis-cluster详解

2022/03/20 Redis

Javascript webpack动态import

2022/04/19 Javascript