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></title>
<script src="http://demo.phpstudy.net/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及其特点
PHP操作XML作为数据库的类
一个删除指定表的所有索引和统计的过程
Oracle数据库迁移介绍
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Joomla教程:jtablesession::Store Failed错误解决方法
PHP学习之整理字符串
WEB标准化的过渡方案
同一个帐号不能同时登陆的问题
无hack无js全兼容text-overflow-ellipsis效果
正则表达式中的特殊字符
加入跨子网路由 Windows Server 2008 VPN
如何用javascript防止连打
一个UBB的PHP类
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 占月语 旅行社操作小结 小钱大快乐 读后感 国际政治专业求职自我介绍 稻田的守护者 初三生活的忙碌的一天 爸爸,您真辛苦!作文500字 小松鼠家着火了200字 警醒着我的一件事 小学五年级作文500字:老虎的捕猎 小学教导处工作职责 师范生实习报告_实习报告 读中国神话故事有感250字 给“球球”洗澡300字 以诚为本收获人气 小学迎省义务教育均衡发展验收汇报材料 故乡的秋作文1100字 一堂班会课作文 社区党建工作调研报告 关于要求成立县文化市场行业协会的报告 山村的那口老井 寻找曼殊沙华作文1000字 小学五年级作文1500字:冬去春来时 2011年镇保密工作规划 人就像蜘蛛,孤独地织网,破了再织 上世纪九九年,南下 网络推广人员的述职报告 励志电影《东方不败》剧情简介 最新学生营养日主题宣传活动方案 欢天喜地过元宵 我要给你满满的爱(一) 小区装修管理规定 初中军训总结500字 小学四年级作文400字:观看国庆大典 尊重人性的不完美 左行右立 人生的第一课作文450字 童年如梦作文 结婚祝福微信 等人的滋味450字 《小时候就在想的事》读后感作文600字 荔枝作文250字 荷叶忆荷花 当空难发生时 远望…… 猪头宝贝:闪闪 生活纪实 圣诞节爱护环境倡议书 《一千零一夜》读后感 时光是一座长长的桥

Copyright © 2016 phpStudy |