jquery - jQuery - 从上到下的简单动画高度

Question

我的网站上有一个侧边栏，显示一些搜索结果。我只想显示前 20 个结果。然后有一个“显示更多”按钮。当您单击该按钮时，我想显示总列表。

这是我现在的代码：http: //jsfiddle.net/FCCGF/1/

我在这里想要的是：

• 页面加载时，仅显示 Test1。

• 当您单击“显示更多”时，我希望动画从上到下开始（以显示列表的所有选项）

• 我希望“显示更多”位于列表的末尾，当用户再次单击它时，我希望它回到原来的位置。

请问有什么帮助吗？

Answer 1

动画时可以更新 top 和 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/