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

JS 页面自动加载函数(兼容多浏览器)

May 18 Javascript

js实现翻页后保持checkbox选中状态的实现方法

Nov 03 Javascript

jQuery实现自动调整字体大小的方法

Jun 15 Javascript

JavaScript学习笔记(三)：JavaScript也有入口Main函数

Sep 12 Javascript

15个常用的jquery代码片段

Dec 19 Javascript

jQuery插件echarts实现的单折线图效果示例【附demo源码下载】

Mar 04 Javascript

基于Vue渲染与插件的加载顺序的问题详解

Mar 05 Javascript

bootstrap动态调用select下拉框的实例代码

Aug 09 Javascript

Mint UI实现A-Z字母排序的城市选择列表

Dec 28 Javascript

微信小程序class封装http代码实例

Aug 24 Javascript

JavaScript实现单图片上传并预览功能

Sep 30 Javascript

Vue中nprogress页面加载进度条的方法实现

Nov 13 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

phpnow php探针环境检测代码

2014/11/04 PHP

twig里使用js变量的方法

2016/02/05 PHP

javascript Excel操作知识点

2009/04/24 Javascript

Array.prototype.concat不是通用方法反驳[译]

2012/09/20 Javascript

jquery统计输入文字的个数并对其进行判断

2014/01/07 Javascript

jQuery中DOM树操作之复制元素的方法

2015/01/23 Javascript

JS实现控制表格单元格垂直对齐的方法

2015/03/30 Javascript

使用iojs的jsdom库实现同步系统时间

2015/04/20 Javascript

简介JavaScript中substring()方法的使用

2015/06/06 Javascript

详解AngularJS中的http拦截

2016/02/09 Javascript

快速解决bootstrap下拉菜单无法隐藏的问题

2018/08/10 Javascript

vue前后分离调起微信支付

2019/07/29 Javascript

微信小程序swiper禁止用户手动滑动代码实例

2019/08/23 Javascript

[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda

2014/05/22 DOTA

[03:33]TI9战队采访 - Infamous

2019/08/20 DOTA

Python实现扫描指定目录下的子目录及文件的方法

2014/07/16 Python

Python常用列表数据结构小结

2014/08/06 Python

Python中type的构造函数参数含义说明

2015/06/21 Python

Python 备份程序代码实现

2017/03/06 Python

Python基于Tkinter模块实现的弹球小游戏

2018/12/27 Python

pycharm第三方库安装失败的问题及解决经验分享

2020/05/09 Python

CSS3 icon font完全指南(CSS3 font 会取代icon图标)

2013/01/06 HTML / CSS

美国派对用品及装饰品网上商店：Shindigz

2016/07/30 全球购物

Intimissimi德国网上商店：意大利知名内衣品牌

2018/04/03 全球购物

英国领先的运动物理治疗供应公司：Vivomed

2018/07/14 全球购物

职业生涯规划书基本格式

2014/01/06 职场文书

农村产权制度改革实施方案

2014/03/21 职场文书

高中运动会广播稿

2014/09/16 职场文书

关于工作经历的证明书

2014/10/11 职场文书

2014年个人师德工作总结

2014/12/04 职场文书

毕业实习指导教师评语

2014/12/31 职场文书

贷款承诺书

2015/01/20 职场文书

2015年教研员工作总结

2015/05/26 职场文书

如何理解python接口自动化之logging日志模块

2021/06/15 Python

Apache Hudi的多版本清理服务彻底讲解

2022/03/31 Servers

2022新作动画《福星小子》释出宣传影片加入内田真礼&宫野真守配音演出

2022/04/08 日漫