// 添加 h-accordion 效果 var w; $.switchable.addEffect("h-accordion", function(i, done) { var self = this, items = self.getPanels(), lastItem = items.eq(self.getIndex()), thisItem = self.getVisiblePanel(i); if ( !w ) { w = items.first().width(); } if ( lastItem.is(":animated") ) { lastItem.stop(true); } lastItem.animate({ width: 0 }, function() { $(this).hide(); }); thisItem.animate({ width: w }, function() { $(this).show(); done.call(); }); }); $(function(){ $(".h-accordion").switchable(".h-accordion > div", { triggers: "img", triggerType: "click", effect: "h-accordion", speed: .3 }) // 为第二和第三个 Panel 设置初始宽度 .children("div:gt(0)").css("width", "0px"); });
<div class="h-accordion"> <img src="../../image/streaminge.png" /> <div> <b>First Panel</b> <i>Content #1</i> </div> <img src="../../image/flash.png" /> <div> <b>Second Panel</b> <i>Content #2</i> </div> <img src="../../image/streaming.png" /> <div> <b>Third Panel</b> <i>Content #3</i> </div> </div>
©2010 IlikejQuery.com