jquery plug-in development to realize jquery accordion function sharing_jquery

can be used for images or containers, and the usage is the same as the regular jQuery plug-in calling method. The implementation principles are not difficult to understand, and they are all in the code comments. If you want to study it, you can look at the code below or the sample demonstration.

Copy code 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||{});
                                                                                                                                       mouseover, click, mouseleave, etc.
* Select: Selector, used to obtain the set of elements that need to be switched
* Cur: The index of the default expanded element
* InitInterval: Initialize the accordion effect animation interval
* Interval: Mouse event animation interval time
* Easing: Animation effect, which requires jQuery.easing support. For parameters, please refer to jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/
*/
var item,boxW,selectW,animateW,sIndex,animateL;
$(self).each(function(){
position':'relative','overflow':'hidden'});
                                                                                                                                                             {'position':'absolute','left':0,'top':0});
               boxW=$(this).outerWidth(); >           animateW=(boxW-selectW)/(item.size()-1); (this).animate({'left':animateW*i 'px'},iSet.InitInterval,iSet.Easing);
                                                                                     .on(iSet.Type,function(e){//Bind mouse event
                                                                                                                                                                      Mouse event animation, by judging the size relationship between the element index value and the current element index value, animate the current element and arrange it animatedly
 n-1) : animateL=animateW*n;
                                                                               ;
        }).eq(iSet.Cur).trigger(iSet.Type);
        });

How to call?
1. Introduce the above plug-in code into the page;
2. $(selectmain).iAccordion({…});
3. For related parameters and functions, please refer to the comments in the plug-in.
A little tip, if you need to define Easing, you need to import the jQuery.easing plug-in. The parameters of Easing are the method names of jQuery.easing, such as easeOutBounce, easeOutQuint, etc.