该方法的功能是停止所选元素中正在执行的动画，其中可选参数[clearQueue]是一个布尔值，表示是否停止正在执行的动画。另外一个可选参数 [gotoend]也是一个布尔值，表示是否立即完成正在执行的动画。
当stop()时：只中断第一个动画；
当stop(true)时：中断所有动画；
当stop(true,true)时：直接到达最终状态。
与stop()方法对应的还有delay()方法，其格式如下：
delay( duration, [queueName])
该方法的功能是设置一个延迟值来推迟后续队列中动画的执行，其中参数为延迟时间的时间值，单位是毫秒。可选参数表示队列名词，即动画队列（如：slideToggle）。
在这里我们需要用到的当然是stop(true)了，
在这里我们需要用到的当然是stop(true)了，修改好代码后，运行结果：
点击网址即可查看：
用JQ或是JS仿淘宝也中用到的手风琴效果：
有了前面的基础，后面的也没那么难了，只是教前面复杂了许多，废话少说，这里直接上代码：
<div> <ul> <li> <a> <img src="https://www.jb51.net/img/1.jpg"> <div> <h3>聚美妆</h3> <p>聚美妆1/2周年庆</p> <p><strong>1</strong><i>折起</i></p> <p>进入专题抢购 > </p> </div> <s></s> <i></i> </a> </li> <li> <a> <img src="https://www.jb51.net/img/2.jpg"> <div> <h3>Baby购</h3> <p>宝宝该换装了，新品抢购</p> <p><strong>2.5</strong><i>折起</i></p> <p>进入专题抢购 > </p> </div> <s></s> <i></i> </a> </li> <li> <a> <img src="https://www.jb51.net/img/3.jpg"> <div> <h3>时装团</h3> <p>时尚春装，清新小潮搭配</p> <p><strong>1</strong><i>折起</i></p> <p>进入专题抢购 > </p> </div> <s></s> <i></i> </a> </li> <li> <a> <img src="https://www.jb51.net/img/4.jpg"> <div> <h3>TV购</h3> <p>补血养颜 就这么简单</p> <p><strong>2.6</strong><i>折起</i></p> <p>进入专题抢购 > </p> </div> <s></s><i></i> </a> </li> <li> <a> <img src="https://www.jb51.net/img/5.jpg"> <div> <h3>聚新鲜</h3> <p>最纯正的泰国香米</p> <p><strong>5</strong><i>折起</i></p> <p>进入专题抢购 > </p> </div> <i></i> </a> </li> </ul> </div>
对样式进行修改，使其接近淘宝网中的效果，代码如下：
body,ul,li,p {margin: 0;padding: 0} ul,ol {list-style: none;} .home-subjects-v2{height:128px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #d3d3d3;border-color:rgba(0,0,0,.12);overflow:hidden;width:938px;margin-top:12px;background:#fff} .home-subjects-v2 ul{width:1000px} .home-subjects-v2 li{width:156px;height:128px;float:left;overflow:hidden;-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear} .home-subjects-v2 li *{-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear} .home-subjects-v2 li a{width:156px;height:128px;display:block;position:relative;cursor:pointer;text-decoration:none;overflow:hidden} .home-subjects-v2 li a:hover{position:absolute} .home-subjects-v2 li a:hover .mask{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in} .home-subjects-v2 li img{height:72px;width:117px;position:absolute;bottom:0;right:-13px} .home-subjects-v2 li .line{height:128px;width:0;font-size:0;border-right:1px dashed #cacaca;position:absolute;right:0;top:4px} .home-subjects-v2 li .info{position:absolute;top:0;left:0;width:136px;padding:4px 10px} .home-subjects-v2 li .info h3{font-size:14px;font-weight:700} .home-subjects-v2 li .info p{color:#868686;font-size:12px;overflow:hidden;width:136px;height:22px;line-height:22px} .home-subjects-v2 li .info p.price{font-size:14px;font-style:italic;color:#fa2a5d;height:35px} .home-subjects-v2 li .info p.price strong{font-size:22px;font-family:Arial;padding-right:2px} .home-subjects-v2 li .info p.price i{font-size:14px} .home-subjects-v2 li .info p.more{display:none} .home-subjects-v2 .mask{height:128px;width:156px;display:block;position:absolute;top:0;left:0;background:#000;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in;_display:none!important} .home-subjects-v2 .big{width:314px} .home-subjects-v2 .big a{width:314px} .home-subjects-v2 .big img{width:195px;height:120px;right:0;bottom:0} .home-subjects-v2 .big .info{width:294px} .home-subjects-v2 .big .info h3{font-size:18px} .home-subjects-v2 .big .info p{font-size:14px;width:166px} .home-subjects-v2 .big .info p.price{font-size:16px;padding-top:7px} .home-subjects-v2 .big .info p.price strong{font-size:28px} .home-subjects-v2 .big .info p.price i{font-size:16px} .home-subjects-v2 .big .info p.more{display:block;font-size:12px;color:#ff2a5b} .home-subjects-v2 .big .mask{width:314px} .home-subjects-v2:hover .mask{-ms-filter:"alpha(Opacity=15)";filter:alpha(opacity=15);opacity:.15;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in}
在这里，我们需要注意的有：
1、超出的部分隐藏（overflow:hidden）、超出的部分显示（overflow:visible）、隐藏元素(display:none)、视觉隐藏元素(visibility:hidden)，我们要区分这几个概念
2、opacity透明度，在标准浏览器和ie浏览器中透明度是不一样的，前面的简单的程序没考虑，但是我们应该时刻有这种意识。
3、虚线的实现方法：.line { position:absolute; right:0px; width:0px;height:128px;border:1px dashed #ccc;}由于只需要虚线边框的效果，故该元素的宽度为0。