創建切換，出現，與HTML和CSS滑動div（也許jQuery？）

嘿所以我想創建一個網頁，我可以點擊一個按鈕，一節將從標題下方滑出，揭示內容。當它滑出時，它下面的所有元素也應該滑落。創建切換，出現，與HTML和CSS滑動div（也許jQuery？）

我有種得到這只是HTML和CSS的工作......我的方法是你點擊哪個是滑出自己，當你點擊並按住它會滑下來。一旦你釋放點擊div滑回備份。

這是通過這個CSS放置在滑出的div完成：

#slide-out { 
    -moz-transition: all 1s ease-in; 
    -webkit-transition: all 1s ease-in; 
    -o-transition: all 1s ease-in; 
    transition: all 1s ease-in; 
    z-index: -1; 
    height: 73px; 
    margin-top: -98px; 
    position: relative ; 
} 

#slide-out:active { 
    margin-top: 0px; 
}

這裏是HTML陪是：

<div id="wrapper"> 
    <div class="section-title">Project</div>  

    <div id="slide-out"> 
    Test 
    </div> <!-- of slide out --> 

    <div class="section-title">The Team</div> 

</div>

但是我想它，以便：

高度可以大得多，不會影響任何後續元素
我不需要按住按鈕來滑出（更多的肘節機制）
我可以點擊一個不是div滑出的按鈕或div滑出的任何東西

非常感謝！

我用來做我的代碼至今：http://www.1stwebdesigner.com/tutorials/slide-out-panel-css3/

來源

2013-03-06 louisdeb

[？你嘗試過什麼（http://whathaveyoutried.com）你可能不得不訴諸JS來在第一個元素完成其運行後，讓子元素滑出。 – Terry 2013-03-06 17:46:30

爲什麼要限制自己的WebKit？ jQuery的了slideDown（）可以做你所需要的是提供更多的跨瀏覽器兼容性： http://api.jquery.com/slideDown/

來源

2013-03-06 17:46:21

創建切換，出現，與HTML和CSS滑動div（也許jQuery？）

回答

相關問題