Jquery 收缩展开效果 点击标题展开或者隐藏内容
标签：
jquery
收缩
效果
| 发表时间：2013-03-06 21:57 | 作者：wangxiaohui6687
出处：http://blog.csdn.net
效果图如下：
代码如下：
<!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>收缩展开效果</title>
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script> //此处需要修改
<link type="text/css" rel="stylesheet" href="common/common.css" />
<style>
/* 收缩展开效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1px solid #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$(".box h1").toggle(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
});
</script>
<!-- 收缩展开效果 -->
<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
</div>
</div>
<br />
<div class="box">
<h1>收缩展开效果</h1>
<div class="text">
1<br />
2<br />
</div>
</div>
</body>
</html>
作者：wangxiaohui6687 发表于2013-3-6 21:57:50 原文链接
阅读：0 评论：0 查看评论
相关 [jquery 收缩 效果] 推荐：
Jquery easyui 下loaing效果
- - CSDN博客推荐文章beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功，关闭进度条. 作者：songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读：15 评论：0 查看评论.
20篇教你得到酷炫效果的JQuery教程
- 正宗 - 帕兰映像我们都喜爱jquery带来的梦幻效果. 本之列举的教程标题不同，但它们都带有不同的酷炫视觉效果. 跟着它们逐步重建你的设计，又或是将这些令人震憾的特效融入你的设计中. 想打造一个让人过目不忘的专属网络文件夹?这个特效是不错的示例. 流行的相片墙加上简洁的特效，没有啰嗦的文字堆砌，立刻抓住用户的注意力.
20 个 jQuery 超酷视觉效果构建教程推荐
- qqinxl - ITeye资讯频道作为web开发程序员来说，我们都非常喜欢jQuery构造的超酷视觉效果. 本文中我们将精选一组jQuery效果教程. 大家将从这些教程中学习如何开发超级酷的视觉效果特效. 根据这些教程，大家可以一步一步构建自己的视觉特效. 创建一个基于HTML5的代表作选辑. 这篇教程中，将会介绍如何使用HTML5和jQuery来创建自己超酷的个人代表作选集.
帮助你生成翻页效果的jQuery插件 – bookblock
- - 前端观察今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock，使用它可以创建动态的类似书本翻页效果的幻灯. 这个插件依赖于 jQuery++，这个类库是一个jQuery的扩展类库，这里使用了它的swipe事件. 主要html代码如下，生成需要展示的图片内容：. 希望大家喜欢这个插件，如果你有任何问题，请给我们留言，谢谢.
JQuery EasyUi之界面设计——前言与界面效果（一）
- - 博客园_首页如果冯巩的开场白是“观众朋友们，我想死你们了”，那么我的开场白是“最近一直很忙，很久没有发文了”. 前面说过了EXT.NET，这里顺便再说说JQuery EasyUI. 为啥我会选择JQuery EasyUI呢. 基本的组件都用，即“麻雀虽小五脏俱全”. 使用简洁方便，比如支持html+js. 世上没有完美的产品，而且其对IE6的兼容性还存在一些问题，但相比extjs，其还是很方便阅读和修改的.
简单的jQuery翻牌效果导航菜单
- - 可咔酷 | 网络杂货铺前几天，有人在Q问那种翻牌效果的广告怎么实现，抽空整了个简单的jQuery翻牌效果的导航菜单，其实说简单也不是很简单，重要的是想好整个过程的思路就好下手了，不整demo了，直接贴代码. 简单的jQuery翻牌效果导航菜单 . 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了.
jQuery 教程：简单的遮罩弹窗效果
- - 我爱水煮鱼遮罩弹出效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西. 这种效果在网上很常见，例如：QQ空间浏览相册等. 这种效果的好处就是，可以让用户聚焦到弹出的菜单中. 神说，有代码的文章，应该有个 Demo ，于是就有了 Demo. 首先先来分析一下这个过程：触发某个事件（例如点击按钮），然后出现一个背景遮罩上面还有一个内容层.
使用 jQuery Easing Plugin 增强动画过渡效果
- - 我爱水煮鱼jQuery 提供了一些诸如 show, hide, slideUp, fadeIn 等动画方法，可以方便的切换元素的显隐. 更有强大的自定义动画方法 animate ，可以实现很多动画效果. 为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果. jquery.easing.js 这个 jQuery 插件增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化.
jQuery 图片放大镜效果插件：jQZoom
- - 我爱水煮鱼在一些产品演示网站，常常需要这样的效果，把鼠标移到小图的上面，旁边出现这这部分的放大效果，通过这种方式让用户能够详细了解产品的细节. jQZoom 就是这样的一个 jQuery 插件，它能够让你网站的图片实现放大镜效果，把鼠标移到小图上，旁边出现大图的局部放大的部分，如下演示：. RSS 用户需要返回页面才能看到效果.