Question

I’m trying to achieve the same blind roll down looking effect google+ has for when you click to view all comments of a post. After some searching I found: http://docs.jquery.com/UI/Effects/Blind#overview but it doesn’t achieve the effect I’m after.

The code alredy present in this html isn’t the partial but the code that helps render the comments sown by default (2) when user enters the page. The partial comments are placed before this on click of a view all link and pushes them down. If more comments are typed before viewing all comments is clicked they are sliced off leaving the 2 most recent comments.

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);
});

Anyway this doesn’t achieve the effect I’m after. It’s like the contents are stuck to another background and as the allCommentsWrapper div is sliding down it’s revealing each comment. I want it to seem as if the comments are stuck to the div so as it’s sliding down it’s like the div is being pulled from the bottom but the top part of it is hidden but seems like it’s just behind the divs above it.

The best way to see what I mean is visit google+ and click on e.g. “23 comments” and watch them slide down.

Would appreciate a solution and some tips if possible.

Kind regards

Answer 1

Edit: added code comments

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

How’s this?

$("#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);
            }
        });
    }

});

Here is an example of how this would be accomplished. Let me know if you need help translating that to your specific example. It’s different as I don’t have your ajax functions, so I mocked the adding of comments.