간단한 jquery 숨기기 및 표시가 작동하지 않습니다.

Question

안녕하세요, 저는이 문제를 며칠 동안 파악하려고 노력해 왔지만 그렇게 할 수 없었습니다. 난 슬라이더 종류의 효과를 얻으려고하기 때문에 jquery hide 및 show를 사용하고 있습니다. 가장 이상한 점은이 코드가 jquery-1.6.2.min.js에서 작동하지만 jquery-1.7.1.min.js에서 작동하지 않는 것입니다.

필자가 필요로하는 jquery 플러그인 동위 원소를 사용하기 때문에 1.7.1을 사용해야합니다.

어떤 도움이나 조언 깊이 감사합니다 :) 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 :

당신이 jQuery를 UI를 설정 한 경우

$(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

그것은 http://jsfiddle.net/m8fg8/3/

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

Answer 2

그냥 jquery1.8.3에 jQuery를 변경 잘 작동합니다. 당신이 바이올린을 업데이트했습니다.

또한 jQuery UI 1.9.2가 필요합니다.