var Conclave=(function(){ var buArr =[],arlen; return { init:function(){ this.addCN();this.clickReg(); }, addCN:function(){ var buarr=["holder_bu_awayL2","holder_bu_awayL1","holder_bu_center","holder_bu_awayR1","holder_bu_awayR2"]; for(var i=1;i<=buarr.length;++i){ $("#bu"+i).removeClass().addClass(buarr[i-1]+" holder_bu"); } }, clickReg:function(){ $(".holder_bu").each(function(){ buArr.push($(this).attr('class')) }); arlen=buArr.length; for(var i=0;i<arlen;++i){ buArr[i]=buArr[i].replace(" holder_bu","") }; $(".holder_bu").click(function(buid){ var me=this,id=this.id||buid,joId=$("#"+id),joCN=joId.attr("class").replace(" holder_bu",""); var cpos=buArr.indexOf(joCN),mpos=buArr.indexOf("holder_bu_center"); if(cpos!=mpos){ tomove=cpos>mpos?arlen-cpos+mpos:mpos-cpos; while(tomove){ var t=buArr.shift(); buArr.push(t); for(var i=1;i<=arlen;++i){ $("#bu"+i).removeClass().addClass(buArr[i-1]+" holder_bu"); } --tomove; } } }) }, auto:function(){ for(i=1;i<=1;++i){ $(".holder_bu").delay(4000).trigger('click',"bu"+i).delay(4000); console.log("called"); } } }; })(); $(document).ready(function(){ window['conclave']=Conclave; Conclave.init(); })
<div id="wrapper_bu"> <div id="bu1"><p class="txt_Center txt_h1">1</p></div> <div id="bu2"><p class="txt_Center txt_h1">2</p></div> <div id="bu3"><p class="txt_Center txt_h1">3</p></div> <div id="bu4"><p class="txt_Center txt_h1">4</p></div> <div id="bu5"><p class="txt_Center txt_h1">5</p></div> </div>
#wrapper_bu { width: 100%; height: 100%; background-color: #ddd; } .holder_bu { cursor: pointer } .holder_bu_awayL1 { position: absolute; top: 15%; left: 10%; width: 10%; height: 70%; background-color: rgba(0,0,50,0.7); -webkit-transition: width 1s, height 1s, top 1s, left 1s; -moz-transition: width 1s, height 1s, top 1s, left 1s; -o-transition: width 1s, height 1s, top 1s, left 1s; -ms-transition: width 1s, height 1s, top 1s, left 1s; transition: width 1s, height 1s, top 1s, left 1s; z-index: 0; } .holder_bu_awayL2 { position: absolute; top: 25%; left: 0%; width: 10%; height: 50%; background-color: rgba(0,0,50,0.5); -webkit-transition: width 1s, height 1s, top 1s, left 1s; -moz-transition: width 1s, height 1s, top 1s, left 1s; -o-transition: width 1s, height 1s, top 1s, left 1s; -ms-transition: width 1s, height 1s, top 1s, left 1s; transition: width 1s, height 1s, top 1s, left 1s; z-index: 1; } .holder_bu_center { position: absolute; top: 5%; left: 20%; width: 60%; height: 90%; background-color: #37c; -webkit-transition: width 1s, height 1s, top 1s, left 1s; -moz-transition: width 1s, height 1s, top 1s, left 1s; -o-transition: width 1s, height 1s, top 1s, left 1s; -ms-transition: width 1s, height 1s, top 1s, left 1s; transition: width 1s, height 1s, top 1s, left 1s; z-index: 2; } .holder_bu_awayR1 { position: absolute; top: 15%; left: 80%; width: 10%; height: 70%; background-color: rgba(0,0,50,0.7); -webkit-transition: width 1s, height 1s, top 1s, left 1s; -moz-transition: width 1s, height 1s, top 1s, left 1s; -o-transition: width 1s, height 1s, top 1s, left 1s; -ms-transition: width 1s, height 1s, top 1s, left 1s; transition: width 1s, height 1s, top 1s, left 1s; z-index: 1; } .holder_bu_awayR2 { position: absolute; top: 25%; left: 90%; width: 10%; height: 50%; background-color: rgba(0,0,50,0.5); -webkit-transition: width 1s, height 1s, top 1s, left 1s; -moz-transition: width 1s, height 1s, top 1s, left 1s; -o-transition: width 1s, height 1s, top 1s, left 1s; -ms-transition: width 1s, height 1s, top 1s, left 1s; transition: width 1s, height 1s, top 1s, left 1s; z-index: 0; }