頁腳動畫和jQuery？

我有一個頁腳，我使用sticky footer css保留在我的頁面底部。我希望我的頁腳開始摺疊，當用戶單擊某個按鈕時，我希望它展開，然後將「展開」鏈接與頁腳div內的不同容器div互換。頁腳動畫和jQuery？

我該如何用jQuery，HTML和CSS來實現？

編輯：

我想頁腳開始約20像素的高度。在頁腳中，應該有一個按鈕（我想是一個鏈接），表示「更多」或「約」。當用戶點擊時，頁腳應該變得更高，並顯示更精細的div，使用替代內容（而不是「更多」鏈接）。

來源

2010-11-29 Moshe

@moshe，你看起來像這樣的頁腳http://www.manatelugumovies.net/ ??? – kobe 2010-11-29 06:20:20

嘗試使用jQuery的slideToggle http://api.jquery.com/slideToggle/ – kobe 2010-11-29 06:24:42

This jsFiddle演示了滑入的基本方法。

這裏是什麼，你會發現那裏摘要：

構建你的CSS這樣初始頁腳高度爲0確保也歸零依賴頁腳高度其它CSS值（即#main上的padding-bottom，以及#footer上的margin-top）。您還需要在#footer上設置overflow:hidden，以確保頁腳內容在摺疊時不可見。
在click()處理您的鏈接
，使用jQuery的animate()功能，增加#footer高度（並同時進行其他必要的填充/保證金的調整）。
animate()函數需要四個參數（see docs here），最後一個是在動畫完成時觸發的回調函數。你可以在這個回調函數中觸發你的鏈接交換。

因此，假設你是從CSSStickyFooter開始使用HTML/CSS，你的代碼的其餘部分看起來像下面...

你的CSS（這正好後stickyfooter CSS）：

#main { 
    padding-bottom: 0; 
} 
#footer { 
    margin-top: 0; 
    height: 0; 
    overflow:hidden; 
}

而JavaScript是這樣的：

$(document).ready(function(){ 
    $('#showFooter').click(function(evt) { 
     $('#footer').animate({ 
      'margin-top' : -150, 
      'height' : 150 
     }, null, null, function() { 
      alert("footer slide-in is complete."); 
      // do your "link swap" operation (whatever it is) right here. 
     }); 
     $('#main').animate({ 
      'padding-bottom' : 150 
     }); 
    }); 
});

編輯：，如果你想擁有頁腳初始可見的（在一些規模較小的大小），然後把它「滑出」到更大的尺寸，只需設置你的需要（而不是0）的任何高度上面顯示的CSS。

您可以將任何您喜歡的內容放入頁腳div中 - 因此，如果您希望在小內容中顯示一組內容，並且在內容很大時顯示不同內容，那麼只需將這些內容放入兩個單獨的div中即可頁腳。將它們設置爲position:absolute;top:0;，這樣它們將在頁腳內相互位於頂部。首先將「展開視圖」設置爲display:none，然後使用jQuery的fadeIn()和函數在點擊處理程序（或動畫回調）中交換頁腳內展開和摺疊視圖的可見性。

Here's the jsFiddle example, adjusted accordingly

現在，如果你真的想要漂亮，可以使頁腳高度依賴的兩個不同的內容視圖的高度。（這可能是我會做的）。

here's a "fancier" jsFiddle that figures the heights from the content

編輯：如果交換兩個動畫調用的順序（所以$('#main').animate(...)自帶$('#footer').animate(...)之前），動畫將運行更流暢，和滾動條將不會閃爍/在動畫過程中關閉。（我原本應該這樣表現出來）。 here's an updated jsFiddle, that shows this minor change。

來源

2010-11-29 06:25:02 Lee

頁腳動畫和jQuery？

回答

相關問題