jquery实现先淡出再折叠收起的动画效果
更新时间：2015年08月07日 09:32:16 作者：皮蛋
这篇文章主要介绍了jquery实现先淡出再折叠收起的动画效果,通过jquery链式操作实现页面元素的渐变折叠与展开功能,非常简单实用,需要的朋友可以参考下
本文实例讲述了jquery实现先淡出再折叠收起的动画效果。分享给大家供大家参考。具体如下：
这里使用jquery实现先淡出再折叠形变的动画效果，动画折叠展开一个层，先淡出，然后Div又发生形状的改变，整体不错哦。
运行效果截图如下：
具体代码如下：
<!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程序设计有所帮助。
相关文章
jquery是一种广泛使用的javascript库,获取a标签上的href值是一个常见的需求,要获取a标签上的href值,只需使用选择器选择a元素,并使用attr()方法来获取href属性值,以下是一些使用jQuery获取a标签上的href值的示例代码,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了jQuery实现的简单拖动层,可实现响应鼠标拖动div层及动态显示坐标值的功能,涉及jQuery鼠标响应及页面元素属性相关操作技巧,需要的朋友可以参考下2017-02-02
下面小编就为大家带来一篇引用jquery框架后出错的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
jQuery调用WebService的实现代码,需要的朋友可以参考下。2011-06-06
如果你明白了前面讲的使用jquery.fn对象属性的方法创建jquery对象的方法，那么使用extend()方法创建jquery对象就比较容易理解了。理解了吗，一定要仔细揣摩，仔细研究。我也是再慢慢的学习，慢慢的领悟2012-08-08
jQuery html表格排序插件tablesorter使用方法详解
这篇文章主要为大家详细介绍了jQuery html表格排序插件tablesorter的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
这篇文章主要介绍了jquery获取并修改触发事件的DOM元素,结合实例形式分析了jQuery基于target 属性获取到触发该事件的dom并修改的相关操作技巧,需要的朋友可以参考下2019-10-10
本篇文章是对JQuery-tableDnD拖拽的基本使用进行了详细的分析介绍，需要的朋友参考下2013-07-07
本文给大家介绍的是EasyUI中树节点（Treegrid节点）的删除的方法和示例，这里推荐给大家，希望对大家能有所帮助。2015-03-03
这篇文章主要介绍了jQuery层级选择器用法,实例分析了常见的四种层级选择器的使用技巧,并给出了实例总结,需要的朋友可以参考下2015-02-02
最新评论