jQuery - 從上到下的簡單動畫高度

我在我的網站上有一個側欄顯示一些搜索結果。我只想要顯示前20個結果。然後有一個「顯示更多」按鈕。當你點擊那個按鈕時，我想顯示總的列表。jQuery - 從上到下的簡單動畫高度

這裏是我現在的代碼：http://jsfiddle.net/FCCGF/1/

我想這裏是：

當網頁加載，只顯示測試1。
當你點擊
「顯示更多」我希望動畫從頂部開始的底部（以顯示所有列表的選項）
我想要的「顯示更多」來在我的列表末尾，當用戶再次點擊它時，我想讓它回到原來的位置。

請幫忙嗎？

來源

2012-08-28 Lelly

將您的'topResultsArea'相對低於'sidebar'表，當你點擊它可以改變邊欄表的高度，而不是'topResultsArea'的高度 – Stefan

動畫時可以更新的頂部和marginTop實現了下滑的影響：

$(document).ready(function() { 
    var totalSidebarHeight = $(".sidebar").height(); 
    var resultHidden = totalSidebarHeight - 20; 

    $(".topResultsArea").height(resultHidden); 

    $(".showMore").toggle(function(){ 
     $(".topResultsArea").animate({height:20, top:$(".sidebar").height(), marginTop:0},200); 

     },function(){ 
      $(".topResultsArea").animate({height:resultHidden, top:0, marginTop:40},200); 
     }); 

});

更新小提琴：http://jsfiddle.net/johnkoer/FCCGF/18/

來源

2012-08-28 13:49:21

jQuery - 從上到下的簡單動畫高度

回答

相關問題