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
精彩评论