3

我不知道如何问这个问题，但我将从我的代码开始。这是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;
}

我遇到的问题是两个按钮的行为（黑色和黄色框）

当您加载页面并单击黑框时，页面卷曲并且文本轻松显示 - 这就是我想要的。但是，当您再次单击黑色按钮时，文本不会轻松消失，它只会消失。

下一个

如果您刷新浏览器并首先单击黄色按钮，页面会卷曲但文本没有显示 - 这也很好 - 它也没有编程。黑盒子有#open ID

问题是这样的——再次点击刷新现在先点击黑色按钮。这将打开卷曲并显示文本，然后如果您继续单击黄色框，它将根据需要轻松进出，并使用 z-index 显示文本，使其也可点击。

我想要什么我想要一个从一开始就可以工作的按钮，它可以缓入和缓出。但是，当卷曲“关闭”时，我希望 z-index 立即设置动画（因此当页面卷曲关闭时没有延迟。）

我希望这是有道理的。

4

1 回答 1

1

在进行任何更改之前，最好将过渡添加到元素中。我已经设置了一个小提琴来说明这一点，我认为它可以实现您的目标：http: //jsfiddle.net/xV9Rx/

本质上：

  1. 我删除了黄色按钮，因为它不需要。

  2. 我已经transition像这样移动了属性：

    .code { 过渡：宽度 2s 缓动，高度 2s 缓动，z-index 0s 缓动；/* z-index 没有延迟 */ }

    .menu-reveal { 过渡：宽度 2s 缓动，高度 2s 缓动，z-index 3s 缓动；/* z-index 的延迟 */ }

就是这样！希望能帮助到你！！:)

于 2013-04-09T08:49:34.717 回答