编程 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 相关文章推荐

精通JavaScript 纠正 cleanWhitespace函数

Mar 11 Javascript

jQuery插件开发全解析

Oct 10 Javascript

jQuery方法简洁实现隔行换色及toggleClass的使用

Mar 15 Javascript

纯js实现仿QQ邮箱弹出确认框

Apr 29 Javascript

jquery实现滑动特效代码

Aug 10 Javascript

jquery实现定时自动轮播特效

Dec 10 Javascript

js和C# 时间日期格式转换的简单实例

May 28 Javascript

客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解

Aug 26 Javascript

微信小程序商品详情页的底部弹出框效果

Nov 16 Javascript

jQuery实现简单的Ajax调用功能示例

Feb 15 jQuery

vue实现的上拉加载更多数据/分页功能示例

May 25 Javascript

Vuex中的Mutations的具体使用方法

Jun 01 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防止直接访问.php 文件的实现方法

2017/07/28 PHP

php获取ajax的headers方法与内容实例

2017/12/27 PHP

PHP使Laravel为JSON REST API返回自定义错误的问题

2018/10/16 PHP

js利用div背景，做一个竖线的效果。

2008/11/22 Javascript

鼠标拖拽移动子窗体的JS实现

2014/02/25 Javascript

关于jQuery中的each方法(jQuery到底干了什么)

2014/03/05 Javascript

JavaScript模块化开发之SeaJS

2015/12/13 Javascript

详解Python中logging日志模块在多进程环境下的使用

2016/12/26 Javascript

JS回调函数基本定义与用法实例分析

2017/05/24 Javascript

vue2.0 父组件给子组件传递数据的方法

2018/01/15 Javascript

在 Typescript 中使用可被复用的 Vue Mixin功能

2018/04/17 Javascript

JS伪继承prototype实现方法示例

2018/06/20 Javascript

Vue CLI3 如何支持less的方法示例

2018/08/29 Javascript

怎样在vue项目下添加ESLint的方法

2019/05/16 Javascript

微信小程序页面间跳转传参方式总结

2019/06/13 Javascript

JQuery样式与属性设置方法分析

2019/12/07 jQuery

[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23

2018/08/24 DOTA

使用httplib模块来制作Python下HTTP客户端的方法

2015/06/19 Python

详解Python编程中time模块的使用

2015/11/20 Python

windows下Python实现将pdf文件转化为png格式图片的方法

2017/07/21 Python

python机器学习之决策树分类详解

2017/12/20 Python

Python之web模板应用

2017/12/26 Python

Python控制Firefox方法总结

2019/06/03 Python

pyqt5 禁止窗口最大化和禁止窗口拉伸的方法

2019/06/18 Python

打包PyQt5应用时的注意事项

2020/02/14 Python

HTML5 语义化结构化规范化

2008/10/17 HTML / CSS

选购世界上最好的美妆品：Cult Beauty

2017/11/03 全球购物

如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?

2015/12/03 面试题

英文版网络工程师求职信

2013/10/28 职场文书

给男朋友的道歉信

2014/01/12 职场文书

大学生职业生涯规划书模板

2014/01/18 职场文书

环保倡议书

2014/04/14 职场文书

论文评语大全

2014/04/29 职场文书

学校节能减排方案

2014/06/13 职场文书

党员转正意见怎么写

2015/06/03 职场文书

2019年教师节活动策划方案

2019/09/09 职场文书