你一定用过书签，也一定给你的书本加过书签，那么你见过书签式的导航吗？ 你一定见过手风琴，也一定知道弹奏手风琴时的它的外形变化，那么你见过手风琴式的导航吗？ 如果没有，请往下看：
前面的话：
这篇博文先通过Javascript做一个简单的手风琴效果，让大家对手风琴效果有一定的了解；紧接着，我们换jquery做类似的手风琴效果。前面的两个例子都很简单，接下来要放大招了，我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果。继续回到书签问题，既然JQ和JS都能实现那么炫酷的效果，我们用CSS3能不能做出手风琴效果的书签来呢？
用Javascript做一个简单的手风琴效果：
话不多说，我们先上代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0; padding: 0; } body{ background-color: rgba(0,0,0,.8); } div{ margin: 20px auto; } #c { width: 500px; height: 300px; overflow: hidden; } p { float: left; width: 20px; height: 300px; } </style> </head> <body> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> </body> </html>
效果：
分析：在不使用JS的情况下，我们只能通过改变p的宽度，来模仿手风琴效果，然后我们忽略人为因素的影响，让其在鼠标经过每个p时，该p的宽度发生变化。
这里我们知道了要改变p的宽度，那么接下来就简单了，我们用前面介绍过的关于Javascript动画的相关方法就可以得到我们想要的效果（点击：Javascript动画相关）。参考代码如下：
function accordion() { var Div = document.getElementById('c'); var Divs = Div.getElementsByTagName('p'); var i = 0; var t = null; for(i = 0; i < Divs.length; i++) { Divs[i].index = i; Divs[i].onmouseover = function() { var index = this.index; if(t) { clearInterval(t); } t = setInterval(function() { var iWidth = 500; for(i = 0; i < Divs.length; i++) { if(index != Divs[i].index) { var iSpeed = (20 - Divs[i].offsetWidth) / 5; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); Divs[i].style.width = Divs[i].offsetWidth + iSpeed + 'px'; iWidth -= Divs[i].offsetWidth; }; }; Divs[index].style.width = iWidth + 'px'; }, 30); }; } } accordion();
上面的代码不做解释，代码运行后的结果点击网址： 查看。
用jquery做类似的手风琴效果：
前面的效果是不是觉得很简单，下面我们加一点点难度，有如下要求：
1、将前面的背景颜色换成图片
2、增加文字
3、用jquery实现
先来完成我们的html代码：
<div> <ul> <li> <a href="javascript:;"> <div> <p>作者：陈武</p> <p>效果：手风琴效果</p> </div> </a> </li> <li> <a href="javascript:;"> <div> <p>作者：陈武</p> <p>效果：手风琴效果</p> </div> </a> </li> <li> <a href="javascript:;"> <div> <p>作者：陈武</p> <p>效果：手风琴效果</p> </div> </a> </li> <li> <a href="javascript:;"> <div> <p>作者：陈武</p> <p>效果：手风琴效果</p> </div> </a> </li> </ul> </div>
注意： <a href="javascript:;">的意思是屏蔽a标签的默认动作
分析样式：只有最后一张图片显示的是原始尺寸，其余的宽度都为100px，然后对我们的样式进行修改，代码如下：
* { margin: 0; padding: 0; font-family: "微软雅黑"; list-style-type: none; } body { background-color: #000; } a { text-decoration: none; } header, footer { width: 1000px; height: 40px; margin: 0 auto; text-align: center; padding: 20px 0; color: #fff; } header p { text-align: right; } .pic { width: 1000px; height: 320px; margin-top: 60px; margin: 0 auto; border: 5px solid aqua; border-radius: 5px; overflow: hidden; } .pic1 { background: url(images/1.jpg) no-repeat; } .pic2 { background: url(images/2.jpg) no-repeat; } .pic3 { background: url(images/3.jpg) no-repeat; } .pic .pic4 { background: url(images/4.jpg) no-repeat; width: 700px; } .pic ul li { float: left; width: 100px; height: 320px; overflow: hidden; } .txt { background-color: rgba(0, 100, 200, .5); height: 320px; width: 100px; } .txt p { float: left; color: #fff; word-break: break-all; } .txt .p1 { font-size: 12px; width: 12px; padding: 30px 10px 0; } .txt .p2 { font-size: 16px; width: 16px; padding: 30px 10px 0; }
在我们运行上面的代码前，我们应注意如下问题
注意一： 不在.pic4前加.pic只是设置的宽度为700会怎样？（.pic4的权重不够，导致该样式被覆盖掉了。）
注意二：如果我们不加no-repeat会怎样？（自己当时疏忽忘了加no-repeat，图片不能正常显示，调试了好久）
注意三：在.pic里面不加overflow: hidden;会怎样？（到后面写了JQ再调试的时候，发现图片老是被挤下来）
接下来用Jquery方法就简单了，我们直接用里面的动画方法animate就行了，代码如下：
$(function() { $('.pic ul li').mouseover(function() { $(this).animate({ width: '700px' }, 1000).siblings().animate({ width: '100px' }, 1000); }); });
到这里，我们发现一点点不足，鼠标经过的时候，动画很僵硬，这时候，我们有没有什么方法能将我们的动画看上去更流畅？
什么？你说stop()方法？stop()方法是什么东西，我好像不知道。【下面是我查到的关于stop()方法的一些知识】
stop()方法的格式如下：
stop( [clearQueue] , [gotoend])