javascript - Reverse animation on a second click -

-

i have submenu elements has on click, slide out spread out fill space. on second click i'd animation reverse before sliding in, jquery knowledge isn't enough achieve this. can please?

my js:

$('.box').click(function(){     var flag = $(this).data('flag');      $('.tab1').toggle("slide", { direction: "left"}, 500);     $('.tab2').toggle("slide", { direction: "left" }, 500);     $('.tab3').toggle("slide", { direction: "left" }, 500);      $('.tab1').animate({top: (flag ? '+=50px' : '-=50px')});      $('.tab3').animate({top: (flag ? '-=50px' : '+=50px')});          $(this).data('flag', !flag) });

jsfiddle

the animations element run after previous 1 has finished, @ moment left slides run , when has finished, vertical animation kicks in.

when flag true, want vertical animation run first. need vertical animation first.

the other issue not animating .tab2 in vertical animation, starts shrinking , looks odd. can around animating 0px during vertical animation, wait until correct time shrink:

$('.box').click(function(){      var flag = $(this).data('flag');            if(flag) {          $('.tab1').animate({top: '+=50px'});          $('.tab3').animate({top: '-=50px'});          $('.tab2').animate({top: '+=0px'});      }            $('.tab1, .tab2, .tab3').toggle("slide", { direction: "left"}, 500);            if(!flag) {          $('.tab1').animate({top: '-=50px'});          $('.tab3').animate({top: '+=50px'});      }            $(this).data('flag', !flag)  });
.square{      margin-left:100px;  }  .box{      position:relative;      width:150px;      height:150px;      background-color:transparent;      color:#fff;      text-align:center;         }  .tab4{     position:absolute;      right:10px;      top:50px;          width:70px;      height:40px;      background-color:grey;  }  .tab{      width:70px;      height:40px;      background-color:grey;      display:none;  }  .tab1{     position:absolute;      right:-70px;      top:50px;  }  .tab2{     position:absolute;      right:-70px;      top:50px;  }    .tab3{     position:absolute;      right:-70px;      top:50px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>  <div class="square">      <div class="box">          <div class="tab4">click</div>                    <div class="tab1 tab"></div>          <div class="tab2 tab"></div>          <div class="tab3 tab"></div>      </div>  </div>


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more