Development of jquery plug-in to implement the jquery accordion Function

If you need an accordion effect, you can write one. In fact, there are multiple ready-made jQuery accordion plug-ins available for use, but after comparison, it is always a bit heavy, or you have to write your own context, which is easier to expand.

It can be used for images or containers. It is used in a different way than the conventional jQuery plug-in call. The implementation principle is not hard to understand, and is included in the Code comments. For more information, see the following code or sample demonstration. The Code is as follows:; (function ($) {/** simple accordion switching plug-in based on jQuery */$. fn. iAccordion = function (iSet) {var self = this; iSet = $. extend ({Type: 'mouseover', Select: 'img ', Cur: 0, InitInterval: 100, Interval: 500, Easing: ''}, iSet | {}); /** Type: mouse event Type, mouseover, click, mouseleave, etc. * Select: selector, used to obtain the set of elements to be switched * Cur: Index of the expanded element by default * InitInterval: animation Interval * Interval: animation Interval of the mouse event * Easing: Specifies the animation effect. jQuery is required. supported by easing. For more information about parameters, see jQuery. easing @ http: // Gsgd. co. uk/sandbox/jquery/easing/*/var item, boxW, selectW, animateW, sIndex, animateL; $ (self ). each (function () {// initialize the container style response (this).css ({'position': 'relative ', 'overflow': 'hiddy'}); item = $ (this ). find (iSet. select); // initialize the switching element style item.css ({'position': 'absolute ', 'left': 0, 'top': 0 }); boxW = $ (this ). outerWidth (); selectW = item. outerWidth (); animateW = (boxW-selectW)/(item. size ()-1); // initialize the arrangement of elements and an index item for the element data. e Ach (function (I) {$ (this ). animate ({'left': animateW * I + 'px'}, iSet. initInterval, iSet. easing); $ (this ). data ('index', I );}). on (iSet. type, function (e) {// bind the mouse event // obtain the current element index value sIndex = $ (this ). data ('index'); // mouse event animation. The animation displays the current element and arranges items by judging the relationship between the element index value and the current element index value. 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); how to call it? 1. Introduce the above plug-in code on the page; 2. $ (selectmain). iAccordion ({...}); 3. For parameters and functions, see the description in the plug-in. TIPS: To define Easing, You need to import the jQuery. easing plug-in. The Easing parameter is the name of jQuery. easing method, such as easeOutBounce and easeOutQuint.