我想使用这个简单的滑动面板。jquery面板

Question

我想让它从左向右移动，而不是从面板下来，谢谢

<title>Simple Slide Panel</title>

    <script type="text/javascript" src="jquery.js"></script>

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

        $(".btn-slide").click(function(){
            $("#panel").slideToggle("slow");
            $(this).toggleClass("active"); return false;
        });


    });
    </script>

    <style type="text/css">
    body {
        margin: 0 auto;
        padding: 0;
        width: 570px;
        font: 75%/120% Arial, Helvetica, sans-serif;
    }
    a:focus {
        outline: none;
    }
    #panel {
        background: #754c24;
        height: 200px;
        display: none;
    }
    .slide {
        margin: 0;
        padding: 0;
        border-top: solid 4px #422410;
        background: url(images/btn-slide.gif) no-repeat center top;
    }
    .btn-slide {
        background: url(images/white-arrow.gif) no-repeat right -50px;
        text-align: center;
        width: 144px;
        height: 31px;
        padding: 10px 10px 0 0;
        margin: 0 auto;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
    }
    .active {
        background-position: right 12px;
    }
    </style>
    </head>

    <body>

    <div id="panel">
        <!-- you can put content here -->
    </div>

    <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

    </body>
    </html>

Answer 1

试试this

编辑：

大卫提出了一个很好的建议。jQuery的美妙之处在于它能够对元素的属性进行动画处理。上滑/下滑/切换设置元素高度的动画。Width是另一个可以动画化的属性，它可以给你带来你想要的水平滑动效果。我发布的链接是一篇带有示例的文章的链接。