Jquery plug in development of jquery accordion function sharing

  • 2020-03-30 02:21:12
  • OfStack

It can be used with images or containers, just like a regular jQuery plug-in call. The implementation principle is not difficult to understand, all in the code comments. Check out the code below, or a sample demonstration.

        var self=this;
         * Type:  Mouse event type, mouseover,click,mouseleave Etc. 
         * Select:  Selector to get the collection of elements that need to be switched 
         * Cur:  Expands the index of the element by default 
         * InitInterval:  Initializes the time between animations for accordion effects 
         * Interval:  Mouse event animation interval 
         * Easing:  Animation, yes jQuery.easing Support, parameters can be referenced jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/
        var item,boxW,selectW,animateW,sIndex,animateL;
            //Initializes the container style
            //Initializes the toggle element style
            //Initializes the array of elements and an index value for element data
            }).on(iSet.Type,function(e){//Bind mouse events
                //Gets the current element index value
                    //Mouse event animation, by determining the size of the element index value and the current element index value of the animation to display the current element and animation
                        n > sIndex ? animateL=selectW+animateW*(n-1) : animateL=animateW*n;

1. Introduce the above plug-in code into the page;
2, $(selectmain). IAccordion ({... });
3. Please refer to the comments in the plug-in for related parameters and functions.
Small hint, if you need to define Easing, you need to import jQuery. Easing plug-in, Easing parameters namely jQuery. Easing method name, such as easeOutBounce, easeOutQuint, etc.

Related articles: