jquery - 滑出菜单侧边栏

Question

我正在尝试学习如何创建滑出式菜单。到目前为止，我已经掌握了一些基本的 HTML 和 CSS。但是，我不确定编写 jQuery 的最佳方法。目前，它滑出但不会滑回。或者我可以使用 CSS Transition 吗？

<div class="side-menu">
   MENU
</div>

<div class="page">

    <a href="#" id="slideMenu"><i class="fa fa-bars"></i></a>

    <p>The Hon. Francis Gillette, in a speech in Hartford, Conn., in 1871, said that there was "in Connecticut, on an average, one liquor shop to every forty voters, and three to every Christian church. In this city, as stated in the _Hartford Times_, recently, we have five hundred liquor shops, and one million eight hundred and twenty-five thousand dollars were, last year, paid for intoxicating drinks. A cry, an appeal, came to me from the city, a few days since, after this wise: 'Our young men are going to destruction, and we want your influence, counsel, and prayers, to help save them.'"</p>

</div>

我的 CSS:

div.side-menu {
    width:260px;
    height:400px;
    background:#202020;
    position:absolute;
    left:-260px;
    top:0px;
}

div.page {
    width:100%; 
    height:100%;
    position:relative;
    top:0;
    left:0px;
    padding:4%;
    padding-top:100px;
    background:#f4f4f4;
}


div.page a {
    display:block;
    width:50px;
    height:50px;
    -o-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;    
    background:#666;
    position:absolute;
    top:20px;
    left:4%;
    font-size:24px;
    text-align:center;
    text-decoration:none;
    padding-top:7px;
    color:#fff;
    outline:none;   
 }

p {
    color:#555; 
    font-size:18px;
    font-weight:normal;
}

我的 jQuery:

    <script>
    $(document).ready(function() {

        $("a").click(function() {
        $(".page").animate({"left": "260px"},"fast");
        });

    });
    </script>

Answer 1

$(文档).ready(函数() {

    $("a").click(function() {
        if($(".page").css("left") == "0px"){
            $(".page").animate({"left": "260px"},"fast");
        }
        else{
            $(".page").animate({"left": "0px"},"fast");
        }
    });

});

heres a fiddle