Development of jquery plug-in and implementation of jquery accordion Functions

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.

Copy codeThe 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 expanded elements by default
* InitInterval: Specifies the animation interval for initializing the accordion effect.
* Interval: animation Interval of mouse events
* Easing: animation effect, jQuery. easing support is required, parameters can be referred to jQuery. easing @ http://gsgd.co.uk/sandbox/jquery/easing/
*/
Var item, boxW, selectW, animateW, sIndex, animateL;
$ (Self). each (function (){
// Initialize the container Style
Watermark (this).css ({'position': 'relative ', 'overflow': 'hidd '});
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 element arrangement and create an index value for the element data
Item. each (function (I ){
$ (This). animate ({'left': animateW * I + 'px'}, iSet. InitInterval, iSet. Easing );
$ (This). data ('index', I );
}). On (iSet. Type, function (e) {// bind a mouse event
// Obtain the index value of the current element
SIndex = $ (this). data ('index ');
// Mouse event animation. The animation displays the current element and arranges the animation by judging the relationship between the element index value and the current element index value.
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 );

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.