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的优点在于它能够动画元素的属性。 slideup / down / toggle动画元素的高度。宽度是另一个可以设置动画的属性，可以为您提供所需的水平滑动效果。我发布的链接是一篇带有示例的文章。

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

1 个答案: