jQuery鼠标经过水平手风琴展开收缩动画效果

介绍一款简单实用的手风琴选项切换效果，鼠标滑动可以在各选项之间进行切换，选项切换的过渡效果流畅，整体颜色和布局都很大气。

分类：图片代码 > 手风琴难易：

查看演示下载资源下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

开始需要引入css样式和javascript插件，body里面直接调用即可生效。

<link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/function.js"></script>

$(function() {
    $("#cardArea").cardArea()
});

选项通过ul和li生成即可，示例如下：

<li class="card-item active">
		<div class="card">
			<div class="card-title title-even">
				<div class="content">
					<div class="zq-product-img">
						<i class="zq-icon icon40x40 crad-area-icon1"></i>
					</div>
					<h1>网站与门户</h1>
					<p class="short-info">连接内外  覆盖多端</p>
				</div>
			</div>
			<div class="card-content content-first bg-e8e8e8">
				<ul class="content-first-list">
					<li>全网门户</li>
					<li>企业域名</li>
				</ul>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
					<a href="#"  class="no-effect">
						<p class="main-head">全网门户</p>
					</a>
					<p class="main-tip">全网企业客户触达、获取商机、达成业务</p>
					<p class="main-desc">使用企业门户进行客户信息管理、销售线索管理，让您随时随地更轻松地获取新的潜在客户，更快捷地完成业务。</p>
					<a href="#" >
					<button class="main-btn">了解详情</button>
					</a>
				</div>
				<ul class="other-info clearfix">
					<li class="other-info-list">
						<a href="#"  class="no-effect">
							<h3 class="other-head">企业域名</h3>
							<p class="other-desc">注域名，享安全服务</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
				</ul>
			</div>
		</div>
	</li>