2

当您单击查看帖子的所有评论时，我正在尝试实现与 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 %>

查询：

$('.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 条评论”并观看它们滑下。

如果可能的话，将不胜感激解决方案和一些提示。

亲切的问候

4

1 回答 1

2

编辑：添加代码注释

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 函数，所以我嘲笑了添加评论。

于 2012-04-18T17:39:28.083 回答