3
我不知道如何提出這個問題，但我會從我的代碼開始。 這裏是HTML和JSJquery z-index，觸發按鈕上的奇怪行爲
<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>
這裏是CSS牛逼去用它。
#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;
}
我得到的問題是兩個按鈕（黑色和黃色框）的行爲
當加載頁面，點擊黑匣子的卷頁，並用輕鬆的文字揭示了- 這就是我想要的。但是，當您再次單擊黑色按鈕時，文本消失並不會消失。
下一個
如果您刷新瀏覽器，首先單擊黃色按鈕的頁面捲髮，但文字不露 - 這是一件好事 - 它不是編程太。黑盒子有#open ID
問題是這個 - 點擊再次刷新，現在先點擊黑色按鈕。這將打開卷曲並顯示文本，然後如果您繼續單擊黃色框，它將按照需要輕鬆地進出，並顯示帶有可點擊的z-index的文本。
我想要的是什麼我想要一個按鈕，從一開始就可以輕鬆進入，並且輕鬆一點。但是，當curl「關閉」時，我希望z-index立即生成動畫（所以頁面捲曲關閉時沒有延遲）。
我希望這是有道理的。
在http://jsfiddle.net/上創建jsfiddle來處理。 – iappwebdev 2013-04-09 08:39:32
只是一個問題，剛剛使用來自黃色按鈕的動畫是什麼問題？它很好地隱藏和顯示菜單 – PaperThick 2013-04-09 08:48:14