jQuery - 滑出侧边栏

我发现此代码为幻灯片输入/输出边栏。在网站加载后如何让它滑入，这样人们就可以偷偷摸摸地看看内容了？jQuery - 滑出侧边栏

（功能侧边栏（）{

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

     ); 



    }());

由于

来源

2011-08-05 Michael

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的

来源

2011-08-05 23:21:17 AlienWebguy

非常感谢！这很棒。 – Michael

对不起，这是我的一个后续问题。是否可以在不使用按钮的情况下调用*（function sidebar（）{*（我之前发布）？ – Michael

当然可以，但请记住'（function sidebar（）{}（））是一个[自我执行的函数]（http://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript），这意味着它内部定义的所有变量都被限制在该范围内，将立即执行，请记住:) – AlienWebguy

jQuery - 滑出侧边栏

回答

相关问题