如何使用带有 appendTo 的 jquery slideDown答案

【问题标题】：How to use jquery slideDown with appendTo如何使用带有 appendTo 的 jquery slideDown
【发布时间】：2014-08-10 00:53:30
【问题描述】：

我正在使用 ajax 请求从数据库中获取记录，并将数据附加到 html 中，但是我想在附加数据时向下滑动 html。不知道该怎么办。

这是我正在使用的 ajax 方法：

$.ajax({
    url: "/get_messages",
    type: "post",
    dataType: "json",
    data: {user_id: UserId},
    success: function(response) {
        if (response.success == true && response.messages.length > 1) {
            $("#user_" + UserId).html("");
            var Length = response.messages.length;
            //alert(Length);
            $.each([response.messages], function(index, value) {
                for (var i = 0; i < Length; i++) {
                    var NewMessage = '<div class="para-repeat inner"><h4 class="h4_"' + value[i]['user_id'] + '>' + value[i]['date'] + '</h4><h4 class="h4_"' + value[i]['user_id'] + '>' + value[i]['truck'] + '</h4><h4 class="h4_"' + value[i]['user_id'] + '>' + value[i]['name'] + '</h4><p class="h4_"' + value[i]['user_id'] + '>' + value[i]['content'] + '</p><a href="#new" class="mail-icon"></a></div>';
                    $("#user_" + UserId).append(NewMessage).show('slow');
                }
            });
            //$("#user_"+UserId).slideDown("slow");
        } else {
            //$("#One").show();
            $("#One").css("display", "block").delay(2000).slideUp("slow");
        }
    }, error: function(xhr, txt) {
        console.log("Something went wrong ", xhr.status);
    }
});

而我的 html 是这样的：

        <% @new_users.each do |message| %>
                <div class="para-repeat outer" id="user_<%= message[:user_id]%>">
                    <h4><%= message[:date] %></h4>
                    <h4><%= message[:truck] %></h4>
                    <h4><%= message[:name] %></h4>
                    <p><%= message[:content] %></p>
                    <a href="#new" class="mail-icon"></a>
                </div>
                <a id="<%= message[:user_id]%>" href="javascript:void(0);" onclick="getMessages(this.id)" class="expand">Expand All</a>
        <% end %>

【问题讨论】：

html 是这样的：

标签： jquery css ajax append slideup

【解决方案1】：

试试这个滑下来

$('body,html').animate({'scrollTop':$("#user_"+UserId).offset().top)});

它可以帮助你...

用于向上滑动所有消息

$('.para-repeat:first',$("#user_"+UserId)).siblings().slideUp().end().slideDown();

【讨论】：

【解决方案2】：

你可以试试这个（它会滚动动画）

之后

$("#user_"+UserId).append(NewMessage)

输入以下代码

var container = $('body');
var scrollTo = $("#user_"+UserId);
container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

【讨论】：