頁腳選項卡滑動DIV

Question

任何人都知道一個很好的教程或技術如何實現底部頁腳選項卡在下面的網站上找到？ 「更多資源」選項卡

http://www.washington.edu/maps/

Answer 1

下面是一個簡單的演示給你帶一些JavaScript/CSS/HTML（我做了一個演示一個的jsfiddle：http://jsfiddle.net/Xbak7/2/）：

HTML -

<div id="bottom_div"> 
    Why Hello There 
    <span id="hidden_span">I wasn't expecting you...</span> 
</div> 

CSS -

#bottom_div { 
    position: fixed; 
    bottom: -35px; 
    height: 55px; 
    width: 200px; 
    left: 50%; 
    margin-left: -100px; 
    background-color: #ccc; 
    text-align: center; 
} 
#hidden_span { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 200px; 
    margin-left: -100px; 
} 

的JavaScript -

$(document).ready(function() { 
    $('#bottom_div').bind('mouseenter', function() { 
     $(this).stop().animate({bottom: 0}, 750, 'easeInExpo'); 
    }).bind('mouseleave', function() { 
     $(this).stop().animate({bottom: '-35px'}, 750, 'easeOutBounce'); 
    }); 
}); 

一些注意事項：

• jQuery的動畫（）可以給出它可以設置以使像在您的示例網站上的動畫反彈的緩解參數。下面是您獲取許多緩動類型的緩動插件的位置：http://gsgd.co.uk/sandbox/jquery/easing/
• 在CSS中的left和margin-left賦值是以div爲中心。
• 如果調用另一個動畫，則.stop()函數會停止動畫。有效地使動畫顯得流暢，您可以將鼠標懸停並快速將鼠標移出div幾次。如果你沒有設置.stop()，那麼這個鼠標快速移出/移出很快就會導致許多動畫按順序播放，並且div不會長時間停止移動。

Answer 2

的技術是很容易的 - 有絕對定位一個div，設置爲頁腳內容的高度（在他們的情況下-188px）的負值的底部位置。當按鈕被點擊時，它將該元素的底部設置爲0.看起來他們也對它有很好的緩動效果。

你會在興趣和http://gsgd.co.uk/sandbox/jquery/easing/

另外，我用Google搜索「jQuery的滑動頁腳」和第一個結果看起來不錯（http://return-true.com/2010/04/jquery-pop-up-footer-version-2/）。我知道這很煩人，當別人告訴你到谷歌的東西，但嚴重的是，它的工作原理：對