jquery - 简单的 jquery 隐藏和显示不起作用

Question

您好，这几天我一直在努力解决这个问题，但始终未能如愿。我只是想获得一种 slider 效果，所以我正在使用 jquery 隐藏和显示。最奇怪的是，这段代码在 jquery-1.6.2.min.js 上有效，但在 jquery-1.7.1.min.js 上似乎不起作用。

我必须使用 1.7.1，因为我正在使用需要它的 jquery 插件同位素。

非常感谢任何帮助或建议:) jsFiddle: http://jsfiddle.net/m8fg8/2/#update

HTML:

<div id="main">
<div class="side-menu-l">
            <nav>
                <a class="reveal" href="#" id="about">About</a>
            </nav>
        </div>

        <div class="information js-information-open">
            <p class="x-white">x</p>
            <div class="inner-information">
                <section>
                    <div class="span-1-2">
                        <p class="mid-white" style="border-bottom:1px solid white">About Kitchen Act</p>
                        <p class="mid-white" style="padding-top:10px">Kitchen Act is a series of works that investigate the daily interactions people have with cutlery, and subsequently aims to decontextualize utensils.</p>
                    </div>
                </section>
                <section>
                    <div class="span-1-22">
                        <p class="mid-white" style="border-bottom:1px solid white"> About #001</p>
                        <p class="mid-white" style="padding-top:10px">Act 1 of Kitchen Act invites the user to spin a virtual slot machine. These random combinations prompts the user to consider the pairing of utensils their food options in their daily life.</p>
                    </div>
                </section>
            </div>
        </div>

CSS:

#main{
    height:300px;
    width:300px;
    background-color:red;
}

.side-menu-l{
    position:fixed;
    top:0;
    left:0;
    width:3.75em;
    height:100%
}

.side-menu-l nav{
    position:absolute;
    width:140px;
    left:1em;
    top:47%;
    /*bottom:53%;*/
    -webkit-transform-origin:0% 50%;
    -webkit-transform:rotate(-90deg) translate(-50%, 50%);
    -moz-transform-origin:0 50%;-moz-transform:rotate(-90deg) translate(-50%, 50%);
    -ms-transform-origin:0 50%;-ms-transform:rotate(-90deg) translate(-50%, 50%);
    -o-transform-origin:0 50%;-o-transform:rotate(-90deg) translate(-50%, 50%);
    transform-origin:0 50%;transform:rotate(-90deg) translate(-50%, 50%);
}

.side-menu-l nav:hover{
    position:absolute;
    padding-top:30px;
    padding-bottom:20px;
    width:140px;
    top:43.5%;
    text-decoration: underline;
}

.side-menu-l nav a{
    text-decoration: none;
    border:0;
    margin:0;
    padding:0;
    font-size:110%;
}

.information{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:-1;
    width:200px;
    height:100%;
    max-height:100%;
    z-index:10000000;
    background: #0000CC;
    /*background:#272727;*/
    -webkit-transition:margin 400ms;
    -moz-transition:margin 400ms;
    -ms-transition:margin 400ms;
    -o-transition:margin 400ms;
    transition:margin 400ms;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overflow-x:hidden;
}

.inner-information{
    overflow:auto;
    position:relative;
    width:calc(100% - 50px);
    margin-top:21px;
    margin-left:1.5em;
}

.mid-white{
    color:white;
    font-size:12px;
    line-height: 16px;  
    text-align: left;
}

.span-1-22{
    margin-top: 20px;
}

.x-white{
    color:white;
    font-size:24px;
    line-height:36px;
    font-size:1.5rem;
    line-height:2.25rem;
    text-indent:0;
    padding-left:6em;
    padding-top:0.5em;
};

.x-white p{
    display:block;
    -webkit-margin-before:1em;
    -webkit-margin-after:1em;
    -webkit-margin-start:0px;
    -webkit-margin-end:0px;
}

.x-white:hover{
    color:#a39c94;
    cursor:pointer
}

JQUERY:

$(document).ready(function(){
    $(".reveal").click(function(){
        $(".js-information-open").show("slide", {direction:'left'});
    });

    $(".x-white").click(function(){
        $(".js-information-open").hide("slide", {direction:'left'} );
    });

});

Answer 1

如果您设置 jQuery UI，它可以正常工作 http://jsfiddle.net/m8fg8/3/

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>