전체 div를 아래로 내리고 어떻게 슬라이딩 할 때 내용이 막대합니까?

Question

Google은 게시물의 모든 댓글을 보려면 클릭 할 때와 동일한 시각 장애인 찾기 효과를 얻으려고합니다. 내가 찾은 일부 검색 후 : http://docs.jquery.com/UI/Effects/Blind#overview하지만 효과가 끝나지 않습니다.

이 HTML에있는 코드 alredy는 사용자가 페이지에 들어갈 때 기본적으로 주석을 렌더링하는 데 도움이되는 코드 (부분적으로는 아니지만)입니다. 부분적인 코멘트는 모든 링크를 클릭하면 볼 수 있습니다. 모든 의견을보기 전에 더 많은 의견을 입력하면 가장 최근의 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); 
      } 
     }); 
    } 

}); 

다음은 이것이 수행되는 방법의 예입니다. 귀하의 구체적인 예를 들어 번역 도움이 필요하면 알려주십시오. 그것은 당신의 아약스 기능을 가지고 있지 않기 때문에 다릅니다. 그래서 나는 덧붙이는 말을 조롱했습니다.