div全体をスライドさせるにはどうしたらいいですか？

Question

私はあなたが投稿のすべてのコメントを表示するためにクリックしたときにGoogleが持っている同じブラインドロールダウンの見た目の効果を達成しようとしています。いくつかの検索の後、私は見つけた：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件のコメント」とそれらが滑り落ちるのを見る。

可能であれば、解決策とヒントがあります。追加されたコードは、このですどのように

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

コメント：

種類は

Answer 1

編集に関しては？

$("#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関数を持っていないので、それは違うので、私はコメントの追加を嘲笑した。