3
이 질문을하는 방법을 모르지만 코드로 시작하겠습니다. 여기에 HTML과 JS Jquery z- 인덱스, 트리거 버튼의 이상한 동작
<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>
#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;
}
내가 무엇입니까 문제는 두 개의 버튼 (검은 색과 노란색 BOXES)의 동작입니다
당신은 페이지를로드하고 블랙 박스를 페이지 컬을 클릭하고 텍스트는 쉽게 알 때 - 그게 내가 원하는거야. 그러나 검은 색 버튼을 다시 클릭하면 텍스트가 사라지지 않고 사라집니다.
다음
브라우저를 새로 고침 먼저 페이지 컬하지만를 노란색 버튼을 클릭하면
하여 텍스트를 공개하지 않습니다 - 그건 너무 괜찮아요 - 너무 프로그램 아니에요. 블랙 박스에는 #open ID가 있습니다.문제가 있습니다. 이제 다시 블랙 버튼을 클릭하십시오. 이것은 컬을 열고 텍스트를 드러내는 것입니다. 그러면 노란색 상자를 계속 클릭하면 클릭이 가능하도록 Z- 인덱스로 텍스트를 드러내고 원하는대로 쉽게 작동합니다.
원하는 항목 처음부터 쉽게 작동하는 버튼 하나가 필요합니다. 그러나 컬이 닫히면 Z- 인덱스가 즉시 애니메이션되기를 원합니다. 따라서 페이지 컬이 닫힐 때 지연이 없습니다.
이 정보가 도움이되기를 바랍니다.
함께 작업하려면 http://jsfiddle.net/에서 jsfiddle을 만드십시오. – iappwebdev
그냥 질문, 노란색 버튼에서 오는 애니메이션을 사용하여 문제가 뭐죠? 그것은 숨기고 메뉴를 멋지게 보여줍니다 – PaperThick