首页 / 脚本样式 / JavaScript / jQuery实现带玻璃流光质感的手风琴特效

具体代码如下：
html代码：

<section class="strips"> <article class="strips__strip"> <div class="strip__content"> <h1 class="strip__title" data-name="Lorem">Awesome</h1> </div> </article> <article class="strips__strip"> <div class="strip__content"> <h1 class="strip__title" data-name="Ipsum">Words</h1> <div class="strip__inner-text"> <h2>Ettrics</h2><script src="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script><p> <a href="#" target="_blank"><i class="fa fa-qq"></i></a> </p> </div> </div> </article> <article class="strips__strip"> <div class="strip__content"> <h1 class="strip__title" data-name="Dolor">Go</h1> <div class="strip__inner-text"> <h2>Ettrics</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid！ Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit！</p> <p> <a href="#" target="_blank"><i class="fa fa-weibo"></i></a> </p> </div> </div> </article> <article class="strips__strip"> <div class="strip__content"> <h1 class="strip__title" data-name="Sit">Inside</h1> <div class="strip__inner-text"> <h2>Ettrics</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid！ Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit！</p> <p> <a href="#" target="_blank"><i class="fa fa-weixin"></i></a> </p> </div> </div> </article> <article class="strips__strip"> <div class="strip__content"> <h1 class="strip__title" data-name="Amet">Here</h1> <div class="strip__inner-text"> <h2>Ettrics</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid！ Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit！</p> <p> <a href="#" target="_blank"><i class="fa fa-leaf"></i></a> </p> </div> </div> </article> <i class="fa fa-close strip__close"></i> </section>

var Expand = function （） {var tile = $（".strips__strip"）;var tileLink = $（".strips__strip > .strip__content"）;var tileText = tileLink.find（".strip__inner-text"）;var stripClose = $（".strip__close"）;var expanded = false;var open = function （） {var tile = $（this）.parent（）;if （！expanded） {tile.addClass（"strips__strip--expanded"）;tileText.css（"transition", "all .6s 1s cubic-bezier（0.23, 1, 0.32, 1）"）;stripClose.addClass（"strip__close--show"）;stripClose.css（"transition", "all .6s 1s cubic-bezier（0.23, 1, 0.32, 1）"）;expanded = true;}};var close = function （） {if （expanded） {tile.removeClass（"strips__strip--expanded"）;tileText.css（"transition", "all 0.15s 0 cubic-bezier（0.23, 1, 0.32, 1）"）;stripClose.removeClass（"strip__close--show"）;stripClose.css（"transition", "all 0.2s 0s cubic-bezier（0.23, 1, 0.32, 1）"）;expanded = false;}};var bindActions = function （） {tileLink.on（"click", open）;stripClose.on（"click", close）;};var init = function （） {bindActions（）;};return { init: init };}（）;Expand.init（）;