开发者

jQuery - Slide out sidebar

开发者 https://www.devze.com 2023-03-26 11:57 出处:网络
I found this code for a slide in/out sidebar. How to let it slide in after the website is loaded so people can sneak peak the content a bit?

I found this code for a slide in/out sidebar. How to let it slide in after the website is loaded so people can sneak peak the content a bit?

(function sidebar() {

        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');
  开发者_StackOverflow          }

        );



    }());

Thanks


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);
}

Demo: http://jsfiddle.net/AlienWebguy/zrdC4/

** Requires JQueryUI

0

精彩评论

暂无评论...
验证码 换一张
取 消