jquery Plugin Development to realize the jquery accordion function

  needs an accordion effect, just write one. In fact, there are a number of off-the-shelf jquery accordion plugin can be used, but compared to a bit, always feel a little bulky, or write their own skeleton of the clearest, it is easier to expand the

Can be used for pictures or containers, using the same way as a regular jquery plug-in. The principle of implementation is not difficult to understand, both in code comments. Want to study can look at the following code, or sample demo.     Code as follows:;(function ($) {   /*      * simple accordion Toggle plugin based on jquery      */    $.fn.iaccordion=function (Iset) {        var self=this;         Iset=$.exten D ({Type: ' mouseover ', Select: ' img ', cur:0,initinterval:100,interval:500,easing: '},iset| | {});        //         * Type: Mouse event type, Mouseover,click,mouseleave etc          * Select: Selector to get the set of elements to be toggled          * Cur: Index of the default expansion element       &N Bsp  * initinterval: Initialization accordion effect animation interval          * Interval: Mouse event animation interval        * easing: animation effect, need jquery.easing support, parameters can refer to jquery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/         */        var Item,boxw,selectw,animatew,sindex,animatel;   &NBSP     $ (self). each (function () {           //init container style         &NB Sp   $ (this). css ({' position ': ' relative ', ' overflow ': ' Hidden '});             item=$ (this)-find (Iset.select);            //initialization toggle element style             item.css ({' position ': ' ABSO lute ', ' left ': 0, ' top ': 0} ';             boxw=$ (this) outerwidth ();             selectw=item.outerwidth ();             animatew= (BOXW-SELECTW)/(Item.size ()-1);            //initialization element arrangement and for element data an index value             Item.each (funct Ion (i) {                $ (this) animate ({' Left ': animatew*i+ ' px '}, iset.initinterval,iset.easing);                 $ (this). Data (' index ', i);       &NBsp    }). On (Iset.type,function (e) {//Bind mouse event                //Get current element index value &NB Sp               sindex=$ (this). Data (' index ');                    //mouse event animation by judging the size relationship between element index value and current element index value animate the current element and animate the                     Item.each (function (n) {                        n > Sindex? animatel=selectw+animatew* (n-1): animatel=animatew*n;                         $ (this). Stop (). Animate ({' Left ': Animate l+ ' px '},iset.interval,iset.easing);                    }            }). EQ (iset.cur). Trigger (Iset.type);        });    }}) (JQuery);     How to call? 1, in the page to introduce the above plug-in code; 2, $ (selectmain). iAccOrdion ({...}); 3, related parameters and functions, please refer to the note in the plugin. Small hint, if need to define easing, need to import jquery.easing plug-in, easing parameter namely Jquery.easing method name, such as Easeoutbounce, Easeoutquint and so on.