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/