jQuery 使用 animate() 正确反转动画

Question

我尝试在 Jquery 中反转一个简单的动画，但这对我来说似乎是个问题!第一个动画作品。
当我点击反转动画时，它也能正常工作。
但如果我想再次使用动画，那是不可能的。 宽度保持在0px。

<div class="logo">
    <a id="remote-content-menu">Show</a>
</div> 

<div class="panell">
    <a id="hide-content-menu">hide</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, iusto, earum blanditiis voluptatibus cupiditate laudantium accusamus commodi corrupti suscipit possimus minima adipisci autem dolorem quam aperiam hic nulla. Laudantium, suscipit.</p>
</div>


<script type="text/javascript">
    $( document ).ready(function() {

        $( "#remote-content-menu" ).click(function() {
          $(".panell").animate({width:'toggle'},200);

        });
        $( "#hide-content-menu" ).click(function() {
          $(".panell").animate({width: 0},200);

        });

    }); 
</script>

有 jsfiddle:http://jsfiddle.net/Sbt75/270/

我认为 width:0px 是问题所在，但我找不到其他解决方案。

Answer 1

Why not do this purely in CSS?

从而保持您对内容 (HTML)、样式 (CSS) 和功能 (JS) 的关注

HTML

<input type='checkbox' id='showHide' />
<label for='showHide' data-showLabel='Show' data-hideLabel='Hide'></label>
<div class="panell">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, iusto, earum blanditiis voluptatibus cupiditate laudantium accusamus commodi corrupti suscipit possimus minima adipisci autem dolorem quam aperiam hic nulla. Laudantium, suscipit.</p>
</div>

CSS

input[type=checkbox] {
    position:relative;
    z-index:1;
    left:-50px;
}
label {
    position:relative;
    z-index:1;
    left:-50px;
}
input[type=checkbox] + label:before {
    left:50px;
    content:attr(data-showLabel);
    position:absolute;
    color:lightblue;
    font-size:16px;
}
input[type=checkbox]:checked + label:before {
    content:attr(data-hideLabel);
}
input[type=checkbox]:checked ~ .panell {
    max-width:260px;
}
.panell {
    position: fixed;
    top:0;
    height:100%;
    z-index:0;
    padding-top:20px;
    max-width:0px;
    transition:max-width 100ms ease-in;
    overflow-x:none;
    overflow-y:auto;
    background:#333;
    color:#fff;
    -webkit-box-shadow:inset 0 0 5px 5px #222;
    -moz-box-shadow:inset 0 0 5px 5px #222;
    box-shadow:inset 0 0 5px 5px #222
}