Question

我找到了滑动输入/输出侧边栏的代码。如何在网站加载后让它滑入，这样人们可以稍微悄悄地窥探一下内容？

（功能侧栏（）{

        var sidebar = $('#sidebar').show(),
            sidebarButton = $('#sidebarButton', sidebar),
            w = sidebar.outerWidth();

        sidebar.css('left', '-' + w + 'px');

        sidebarButton.toggle (

            function() {
                sidebar.css('left', 0).show('slide', { easing: 'easeOutCubic' }, 1000, function() {
                    sidebarButton.css('right', '-20px');
                });
            },

            function() {
                sidebar.animate({ left: '-' + w + 'px' }, 1000, 'easeOutCubic');
                sidebarButton.css('right', '-20px');
            }

        );



    }());

由于

Answer 1

HTML：

<div id="sidebar">My sidebar</div>

CSS：

#sidebar {
    float:left;
    height:100%;
    position:fixed;
    background-color:#CCC;
    width:200px;
    display:none;
}

JQuery：

$(function(){
    toggle_sidebar();
    setTimeout(toggle_sidebar,3000);
});

function toggle_sidebar(){
    $('#sidebar').toggle('slide', { direction: 'left' }, 500);
}

演示：http://jsfiddle.net/AlienWebguy/zrdC4/

** 需要JQueryUI

jQuery - 滑出边栏

1 个答案: