Jquery z索引，触发按钮上的奇怪行为。

I don't know how to ask this question but i'll start with my code. here is the HTML and js

我不知道该怎么问这个问题，但我会从我的代码开始。这是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>

and here is the css t go with it.

这是css t。

#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;
}

The problem I am getting is the behaviour of the two buttons (THE BLACK AND YELLOW BOXES)

我得到的问题是两个按钮的行为(黑色和黄色方框)

when you load the page and click the black box the page curls and the text reveals with an ease - thats what i want. However, when you click the black button again the text doesn't disappear with an ease it just disappears.

当你加载页面并点击黑色框时，页面就会卷曲，文本会轻松地显示出来——这就是我想要的。然而，当你再次点击黑色按钮时，文本不会消失，只是消失了。

下一个

if you refresh your browser and click the yellow button first the page curls but the the text does not reveal - that's fine too -- it's not programmed too. the black box has the #open ID

如果你刷新你的浏览器，点击黄色按钮，页面就会弯曲，但是文本不会显示——这也很好——它也没有被编程。黑盒子有#打开的ID。

the problem is this - hit refresh again now click the black button first. this will open the curl and reveal the text, then if you keep clicking the yellow box it will work as desired ease in and out revealing the text with a z-index that makes it clickable too.

问题是这个-点击刷新现在再次点击黑色按钮。这将打开curl并显示文本，然后如果您继续单击黄色框，它将以希望的方式工作，并通过一个z索引来显示文本，从而使它也可以单击。

WHAT I WANT I want one button that works from the start which eases in and eases out. However, when the curl "closes" i want the z-index to animate immediately (so there is no delay when the page curl closes.)

我想要的是一个按钮，它可以在开始的时候起作用，然后就可以消除。然而，当curl“关闭”时，我希望z索引立即激活(因此当页面curl关闭时就不会出现延迟)。

I hope this makes sense.

我希望这是有意义的。

1 个解决方案

#1

It is always best to get the transition added to an element BEFORE you make any changes. I've setup a fiddle to illustrate this and I think it achieves your goal: http://jsfiddle.net/xV9Rx/

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

Essentially:

从本质上讲:

I've removed the yellow button since it isn't needed.
我已经删除了黄色按钮，因为它不需要。
I've moved transition properties around like so:

我就像这样移动了过渡属性:

.code { transition: width 2s ease, height 2s ease, z-index 0s ease; /* no delay on z-index */ }

.code {transition: width 2s ease, height 2s ease, z-index 0s ease;/* z-index */}无延迟

.menu-reveal { transition: width 2s ease, height 2s ease, z-index 3s ease; /* delay on z-index */ }

.menu-reveal {transition: width 2s ease, height 2s ease, z-index 3s ease;/* z-index */}

and thats it! Hope it helps!! :)

这是它!希望它帮助! !:)

#1