Original JavaScript Jquery special effects-multi-effect folding menu (with detailed comments and algorithm ideas), javascriptjquery

Original JavaScript Jquery special effects-multi-effect folding menu (with detailed comments and algorithm ideas), javascriptjquery

<! DOCTYPE html> 


$ (Document ). ready (function () {// There Is A menuBodyvar menuHeader under a menuHeader =$ (". menuHeader "); var menuBody = $ (". menuBody "); var divTemp = document. getElementById ("divTemp"); var moveTime = 300; var globalMoveLock = false; // adjust ("display") = "block") {$ (menuBody [I]). slideUp (300);} else {// traverse all menubodies and close all menubodies. Then open the current menuBodymenuBody. each (Function( I ){if((this).css ("display") = "block") {$ (this ). slideUp (300) ;}}); // display the click item (first view menuBody [I]. whether children is hidden. If yes, one of them is displayed.) var hide ("display") = "none" & define (this).css ("opacity") = "1 ") {flag = true;} else {// This code segment does not seem to be executable .... flag = false ;}}); if (flag = true) {// hide ("display", "block") ;}$ (me NuBody [I]). slideDown (300) ;}}) ;}); // get all previous page buttons, next page buttons var preBtns =$ (". previousPage "); var nexBtns = $ (". nextPage "); // all previous page buttons preBtns. each (function () {$ (this ). click (function () {// $ (this. parentNode. parentNode ). animate ({right: '220px '}); // obtain the MenuBody of the clicked area and all ulMenuBodyvar menuBodys = this. parentNode. parentNode. parentNode; var ulMenuBodys = menuBodys. childrenvar index =-1; // determines which ulMenuBody is visible. visible means the current ulMenuBo Dy, and record the subscript $ (ulMenuBodys). each (function (I) {// downstream judgment is required! When the animation execution is complete, then when 1if((this%.css ("opacity ")! = "0") {index = I; return false ;}}); // alert (index); if (ulMenuBodys [index-1]! = Undefined) {// click the previous page and move it to the right. The current block needs to be hidden and the transparency is set to 0. After the animation is stopped, the final transparency is set to 1 // ((ulmenubodys?index=1=).css ("display ", "block"); $ (menuBodys ). animate ({right: "-= 220px"}, moveTime); $ (ulMenuBodys [index]). animate ({opacity: "0" hour, movetime,function({}}(ulmenubodys?index=}.css ("opacity", "1" ).css ("display", "none ");}); $ (ulMenuBodys [index-1]). animate ({opacity: "1"}, moveTime) ;}}); // all next page buttons nexBtns. each (function () {$ (this ). click (functi On () {// $ (this. parentNode. parentNode ). animate ({right: '220px '}); // obtain the MenuBody of the clicked area and all ulMenuBodyvar menuBodys = this. parentNode. parentNode. parentNode; var ulMenuBodys = menuBodys. childrenvar index =-1; // determines which ulMenuBody is visible. visible means the current ulMenuBody, and records the subscript $ (ulMenuBodys ). each (function (I) {// downstream judgment is required! When the animation execution is complete, then when 1if((this%.css ("opacity ")! = "0") {index = I; // divTemp. innerHTML = "index =" + index; return false ;}); if (ulMenuBodys [index + 1]! = Undefined & globalMoveLock = false) {// moveLock (); // hide ("display", "block" example .css ("opacity", "0 "). animate ({opacity: "1"}, moveTime); $ (menuBodys ). animate ({right: "+ = 220px"}, moveTime); $ (ulMenuBodys [index]). animate ({opacity: "0"}, moveTime); // divTemp. innerHTML + = "index =" + index ;}}) ;}); function moveUnLock () {globalMoveLock = false ;}function moveLock () {globalMoveLock = true ;}