Question

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

我得到的问题是两个按钮（黑色和黄色盒子）的行为

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

下

如果你刷新浏览器并点击黄色按钮，首先页面卷曲但文本没有显示 - 那也没关系 - 它也没有编程。黑匣子有#open ID

问题是这个 - 再次点击刷新现在先点击黑色按钮。这将打开卷曲并显示文本，然后如果你继续点击黄色框，它将按照所需的方便工作，用z-index显示文本，使其可点击。

我想要什么我希望一个按钮从一开始就能正常工作并轻松自如。但是，当卷曲“关闭”时，我希望z-index立即生成动画（因此页面卷曲关闭时没有延迟。）

我希望这是有道理的。

Answer 1

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

<强>本质：

我已经删除了黄色按钮，因为它不需要。
我已经移动了transition属性：

.code { 过渡：宽度2s轻松，高度2s轻松，z-index 0s轻松; / * z-index没有延迟* / }

.menu-reveal { 过渡：宽度2s轻松，高度2s轻松，z-index 3s轻松; / *延迟z-index * / }

就是这样！希望能帮助到你！！：）

Jquery z-index，触发按钮上的奇怪行为

1 个答案: