可用於圖片或者容器，使用與常規jQuery插件調用方式無異。實現原理也不難理解，都在代碼注釋中。想研究的可以看下面的代碼，或者樣例演示。
. 代碼如下:
;(function($){
/*
* 基於jQuery的簡易手風琴切換插件
*/
$.fn.iAccordion=function(iSet){
var self=this;
iSet=$.extend({Type:'mouseover',Select:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{});
/*
* Type: 鼠標事件類型，mouseover,click,mouseleave等
* Select: 選擇器，用以獲取需要切換的元素集合
* Cur: 默認展開元素的索引
* InitInterval: 初始化手風琴效果動畫間隔時間
* Interval: 鼠標事件動畫間隔時間
* Easing: 動畫效果，需要jQuery.easing支持，參數可參考jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/
*/
var item,boxW,selectW,animateW,sIndex,animateL;
$(self).each(function(){
//初始化容器樣式
$(this).css({'position':'relative','overflow':'hidden'});
item=$(this).find(iSet.Select);
//初始化切換元素樣式
item.css({'position':'absolute','left':0,'top':0});
boxW=$(this).outerWidth();
selectW=item.outerWidth();
animateW=(boxW-selectW)/(item.size()-1);
//初始化元素排列並為元素data一個索引值
item.each(function(i){
$(this).animate({'left':animateW*i+'px'},iSet.InitInterval,iSet.Easing);
$(this).data('index',i);
}).on(iSet.Type,function(e){//綁定鼠標事件
//獲取當前元素索引值
sIndex=$(this).data('index');
//鼠標事件動畫，通過判斷元素索引值與當前元素索引值的大小關系動畫顯示當前元素並動畫排列
item.each(function(n){
n > sIndex ? animateL=selectW+animateW*(n-1) : animateL=animateW*n;
$(this).stop().animate({'left':animateL+'px'},iSet.Interval,iSet.Easing);
});
}).eq(iSet.Cur).trigger(iSet.Type);
});
}
})(jQuery);
如何調用？
1、在頁面中引入上面的插件代碼；
2、$(selectmain).iAccordion({…});
3、相關參數及功能，請參考插件中的注釋說明。
小小的提示，若需要定義Easing，需要導入jQuery.easing插件 ，Easing的參數即jQuery.easing的方法名稱，如easeOutBounce、easeOutQuint等。