javascript - 如何向下滑动整个 div，但在滑动时使其内容保持不变？

Question

当您点击查看帖子的所有评论时，我正在尝试实现与 google+ 相同的盲目滚动效果。经过一番搜索后我发现:http://docs.jquery.com/UI/Effects/Blind#overview但达不到我想要的效果。

此 html 中存在的代码不是部分代码，而是在用户进入页面时帮助呈现默认情况下 (2) 的注释的代码。单击“查看所有”链接后，部分评论将放置在此之前并将其向下推送。如果在单击查看所有评论之前输入更多评论，这些评论将被切掉，留下 2 个最新评论。

html:

<% if m.comments.any? %>


    <div class="allCommentsWrapper">
        <% comments(m.id).each do |comment| %>
             <div class="comment_container">
              <%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>
         <div class="commenter_content"> <div class="userNameFontStyle"><%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%=  simple_format h(comment.content) %> </div>
            </div><div class="comment_post_time"> <%= time_ago_in_words(comment.created_at) %> ago. </div>
        </div>
      <% end %>
    </div>


<% end %>

JQuery:

$('.view_all_comments').off().on('ajax:success', function(e){
    e.preventDefault();
    $(this).parents('.post_content').find('.comment_container').slice(0, -2).remove();
    $(this).parents('.post_content').find('.comment_container:first').before("<%= j render 'users/partials/show_all_comments', :comments => @comments %>");
    $(this).parents('.post_content').find('.allCommentsWrapper').hide().show("blind", { direction: "vertical" }, 6000);
});

无论如何，这并没有达到我想要的效果。就像内容粘在另一个背景上一样，当 allCommentsWrapper div 向下滑动时，它会显示每条评论。我希望评论看起来好像粘在 div 上，这样当它向下滑动时，就好像 div 被从底部拉出，但它的顶部部分被隐藏，但看起来就在上面的 div 后面。

理解我的意思的最好方法是访问 google+ 并点击例如“23 条评论”并看着它们滑落。

如果可能的话，希望得到解决方案和一些提示。

亲切的问候

Answer 1

编辑:添加代码注释

http://jsfiddle.net/MZzUr/51/

这个怎么样？

$("#posts").on("click", ".expander", function() {
    var commentsList = [],
        commentTemplate = $("<div/>").addClass("comment"),
        tempComment = null,
        gettingComments = new $.Deferred(),
        $this = $(this);

    // here you would probably have an ajax call
    // I just used a for loop
    // in the done or success of the ajax call, resolve addingComments
    // return an array of results and create in memory dom objects with jquery
    // $.get(url, data, function(results) {
    //    //add results to commentsList
    //    gettingComments.resolve()
    // });
    for (var i = 0; i < 10; i++) {
        tempComment = commentTemplate.clone().text("Comment " + i);
        commentsList.push(tempComment);
    }
    gettingComments.resolve();

    gettingComments.done(function() {
        // mine were added in order created, we are going to prepend them backwards
        // so reverse the list. (easier to use in recursive function)
        commentsList.reverse();

        // pass list to recursive function to add and animate items one at a time
        AddAndAnimate(commentsList, 30, $this);
    });

    function AddAndAnimate(items, delay, $container) {
        // prepend the item, get the height, then hide it
        $container.prepend(items[0]);
        var addToHeight = "+=" + items[0].height();
        items[0].hide();

        // animate the height change of adding the element
        // when the animation is done, show the element again,
        // remove the first element from the array, and call the recursive function
        $container.animate({
            height: addToHeight
        }, delay).promise().done(function() {
            items[0].show();
            items.splice(0, 1);
            if (items.length > 0) {
                AddAndAnimate(items, delay, $container);
            }
        });
    }

});

以下是如何实现这一点的示例。如果您需要帮助将其转化为您的具体示例，请告诉我。这是不同的，因为我没有你的ajax功能，所以我 mock 添加评论。