この質問の仕方がわかりませんが、コードから始めましょう。ここに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>
これがそれに付随する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;
}
私が得ている問題は、2 つのボタン (黒と黄色のボックス) の動作です。
ページを読み込んで黒いボックスをクリックすると、ページがカールし、テキストが簡単に表示されます。これが私の望みです。ただし、黒いボタンをもう一度クリックすると、テキストが簡単に消えるわけではなく、消えるだけです。
次
ブラウザを更新して最初に黄色のボタンをクリックすると、ページがカールしますが、テキストは表示されません。これも問題ありません。それもプログラムされていません。ブラック ボックスには #open ID があります
問題はこれです-もう一度更新を押して、最初に黒いボタンをクリックしてください。これにより、カールが開き、テキストが表示されます。黄色のボックスをクリックし続けると、必要に応じて機能し、クリック可能にする z-index を使用してテキストを表示します。
私が欲しいもの 私は、最初から機能する、イージーインとイージーアウトのボタンが 1 つ必要です。ただし、カールが「閉じる」ときは、z-index をすぐにアニメーション化する必要があります (そのため、ページのカールが閉じるときに遅延はありません)。
これが理にかなっていることを願っています。