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 %>

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コメント」をクリックして、それらが下にスライドするのを見るのです。

可能であれば、解決策といくつかのヒントをいただければ幸いです。

敬具

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 に答える