jquery实现先淡出再折叠收起的动画效果


Posted in Javascript onAugust 07, 2015

本文实例讲述了jquery实现先淡出再折叠收起的动画效果。分享给大家供大家参考。具体如下:

这里使用jquery实现先淡出再折叠形变的动画效果,动画折叠展开一个层,先淡出,然后Div又发生形状的改变,整体不错哦。

运行效果截图如下:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery先淡出再变形的动画</title>
<style type="text/css">
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; }
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $("#panel h5.head").toggle(function(){
  $(this).next("div.content").fadeOut();
 },function(){
  $(this).next("div.content").fadeIn();
 })
})
</script>
</head>
<body>
<div id="panel">
 <h5 class="head">jQuery动画制作实例</h5>
 <div class="content">
  展示使用jQuery生成动画效果的一个小例子,让一个Div层先淡出然后再发生形变,最后折叠消失的特效代码。。</div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js获取html文件的思路及示例
Sep 17 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
Vue的props父传子的示例代码
May 20 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
js实现筛选功能
Nov 24 Javascript
C++中的string类的用法小结
Aug 07 #Javascript
Grunt入门教程(自动任务运行器)
Aug 06 #Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 #Javascript
jQuery实现hover合成事件的方法
Aug 06 #Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 #Javascript
jQuery实现动画效果circle实例
Aug 06 #Javascript
jQuery动态星级评分效果实现方法
Aug 06 #Javascript
You might like
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
基于vue实现分页效果
2017/11/06 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
Python的装饰器用法学习笔记
2016/06/24 Python
5款非常棒的Python工具
2018/01/05 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python 实现数组相减示例
2019/12/27 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
Css3圆角边框制作代码
2015/11/18 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
青春奉献演讲稿
2014/05/08 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
幼儿园课题方案
2014/06/09 职场文书
2014年客房部工作总结
2014/11/22 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
python实现会员信息管理系统(List)
2022/03/18 Python
MYSQL常用函数介绍
2022/05/05 MySQL