首页 > 代码库 > 原创JavaScript Jquery特效之----多重特效折叠菜单(附带详细注释和算法思路)
原创JavaScript Jquery特效之----多重特效折叠菜单(附带详细注释和算法思路)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折叠菜单</title> <script type="text/javascript" src=http://www.mamicode.com/"js/jquery-2.1.0.js"></script>>$(document).ready(function () { //一个menuHeader下方有一个menuBody var menuHeader=$(".menuHeader"); var menuBody=$(".menuBody"); var divTemp=document.getElementById("divTemp"); var moveTime=300; var globalMoveLock=false;//全局动画锁 menuHeader.each(function(i){ $(this).click(function(){ if($(menuBody[i]).css("display") == "block"){ $(menuBody[i]).slideUp(300); } else{ //遍历所有menuBody并且关闭所有menuBody,再打开当前menuBody menuBody.each(function(i){ if($(this).css("display") == "block"){ $(this).slideUp(300); } }); //显示点击项(先查看menuBody[i].children是否全部隐藏,是则显示其中一项) var flag=false; $(menuBody[i].children).each(function(){ if($(this).css("display") == "none" && $(this).css("opacity")=="1"){ flag=true; } else{ //本段代码似乎不可能执行到.... flag=false; } }); if(flag==true){ //当menuBody[i].children全部不可见时,显示第一项 $(menuBody[i].children[0]).css("display","block"); } $(menuBody[i]).slideDown(300); } }); }); //获取所有上一页按钮按钮,下一页按钮 var preBtns=$(".PreviousPage"); var nexBtns=$(".NextPage"); //所有上一页按钮 preBtns.each(function(){ $(this).click(function(){ //$(this.parentNode.parentNode).animate({right:'220px'}); //先获取点击区域的MenuBody,和该区域的所有ulMenuBody var menuBodys=this.parentNode.parentNode.parentNode; var ulMenuBodys=menuBodys.children var index=-1; //判断哪一个ulMenuBody是可见的,可见的即代表是当前的ulMenuBody,并记录下标 $(ulMenuBodys).each(function(i){ //下行判断必须用!=0而不是==1(因为需要动画执行完毕才==1) if($(this).css("opacity") != "0"){ index=i; return false; } }); //alert(index); if(ulMenuBodys[index-1]!=undefined){ //点击上一页,整体向右动,当前块需要隐藏同时透明度设置为0,动画停止后最后透明度设置为1 //$(ulMenuBodys[index+1]).css("display","block"); $(menuBodys).animate({right:"-=220px"},moveTime); $(ulMenuBodys[index]).animate({opacity:"0"},moveTime,function(){ $(ulMenuBodys[index]).css("opacity","1").css("display","none"); }); $(ulMenuBodys[index-1]).animate({opacity:"1"},moveTime); } }) }); //所有下一页按钮 nexBtns.each(function(){ $(this).click(function(){ //$(this.parentNode.parentNode).animate({right:'220px'}); //先获取点击区域的MenuBody,和该区域的所有ulMenuBody var menuBodys=this.parentNode.parentNode.parentNode; var ulMenuBodys=menuBodys.children var index=-1; //判断哪一个ulMenuBody是可见的,可见的即代表是当前的ulMenuBody,并记录下标 $(ulMenuBodys).each(function(i){ //下行判断必须用!=0而不是==1(因为需要动画执行完毕才==1) if($(this).css("opacity") != "0"){ index=i; //divTemp.innerHTML="index="+index; return false; } }); if(ulMenuBodys[index+1]!=undefined && globalMoveLock==false){ //moveLock(); //先设置成可见,透明度为0,再慢慢将透明度提高到1 $(ulMenuBodys[index+1]).css("display","block") .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; }原创JavaScript Jquery特效之----多重特效折叠菜单(附带详细注释和算法思路)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。