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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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代码
2007/03/03 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现的各种排序算法代码
2013/03/04 Python
python机器学习之神经网络(三)
2017/12/20 Python
python中正则表达式的使用方法
2018/02/25 Python
python迭代dict的key和value的方法
2018/07/06 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
大学生农村教师实习自我鉴定
2013/09/21 职场文书
开业庆典邀请函
2014/01/08 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
远程培训的心得体会
2014/09/01 职场文书
庆祝儿童节标语
2014/10/09 职场文书
会计专业自荐信范文
2015/03/05 职场文书
队列队形口号
2015/12/25 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
利用Apache Common将java对象池化的问题
2022/06/16 Servers