Question

当你点击查看帖子的所有评论时，我正试图达到谷歌+所具有的相同的盲目滚动效果。经过一番搜索，我发现：http://docs.jquery.com/UI/Effects/Blind#overview但它没有达到我想要的效果。

此html中的代码alredy不是部分代码，而是用于在用户进入页面时帮助呈现默认播放的注释（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功能，所以我嘲笑添加评论。

我如何滑下整个div，但是当它滑动时它的内容会粘住？

1 个答案: