onclick - Jquery z-index, Strange behaviour on trigger buttons -
i don't know how ask question i'll start code. here html , js
<html> <head> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> </head> <body> <div id="behind-bg"></div> <div id="code" class="code"> <a id="testlink" href="#">click here</a><br> <a id="testlink" href="#">click here</a><br> <a id="testlink" href="#">click here</a> </div> <div id="curl" class="curl"></div> <div id="check-box-float"> <div id="open" class="toggle-menu"> <div id="close" class="toggle-menu"> </div> </body> <script> $(function() { $("#open").click(function() { $(".curl").toggleclass("curl-out"); }); }); $(function() { $("#open").click(function() { $(".code").toggleclass("menu-reveal"); }); }); $(function() { $("#close").click(function() { $(".code").toggleclass("menu-unreveal"); }); }); </script> </html> and here css t go it.
#open { position:absolute; display:block; height:40px; width:40px; background: black; top: 200px; left: 400px; z-index: 10; } #close { position:absolute; z-index: -9; display:block; height:40px; width:40px; background: yellow; top: 0; left: 40px; } .curl{ background: -moz-linear-gradient(-45deg, rgba(112,112,112,0) 48%, rgba(229,229,229,0.75) 51%, rgba(229,229,229,1) 52%, rgba(249,249,249,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(48%,rgba(112,112,112,0)), color-stop(51%,rgba(229,229,229,0.75)), color-stop(52%,rgba(229,229,229,1)), color-stop(100%,rgba(249,249,249,1))); /* chrome,safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* ie10+ */ background: linear-gradient(135deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* w3c */ width:15px; height:15px; position:fixed; top:0; left:0; box-shadow: 0px 0px 5px #d3d3d3; z-index: 20; transition: width 2s ease, height 2s ease; } .curl-out { width: 300px; height: 300px; box-shadow: 0px 0px 10px #d3d3d3; } .code{ background:#fffff; white-space: nowrap; overflow: hidden; width:15px; height:15px; position:fixed; top:0; left:0; z-index: 10; } .menu-reveal { transition: width 2s ease, height 2s ease, z-index 3s ease; width: 250px; height: 250px; z-index: 50; } .menu-unreveal { transition: width 2s ease, height 2s ease, z-index 0s ease; width: 15px; height: 15px; z-index: 10; } the problem getting behaviour of 2 buttons (the black , yellow boxes)
when load page , click black box page curls , text reveals ease - thats want. however, when click black button again text doesn't disappear ease disappears.
next
if refresh browser , click yellow button first page curls the text not reveal - that's fine -- it's not programmed too. black box has #open id
the problem - hit refresh again click black button first. open curl , reveal text, if keep clicking yellow box work desired ease in , out revealing text z-index makes clickable too.
what want want 1 button works start eases in , eases out. however, when curl "closes" want z-index animate (so there no delay when page curl closes.)
i hope makes sense.
it best transition added element before make changes. i've setup fiddle illustrate , think achieves goal: http://jsfiddle.net/xv9rx/
essentially:
- i've removed yellow button since isn't needed.
i've moved
transitionproperties around so:.code { transition: width 2s ease, height 2s ease, z-index 0s ease; /* no delay on z-index */ }
.menu-reveal { transition: width 2s ease, height 2s ease, z-index 3s ease; /* delay on z-index */ }
and thats it! hope helps!! :)
Comments
Post a Comment