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 - 滑出側邊欄

回答

相關問題