Как я могу использовать Jquery для скольжения элементов, которые были скрыты перед добавлением в DOM?

Question

Я думал, что это было довольно просто. Но, оказывается, не быть. Я работаю с этим кодом:

<script type="text/javascript">
    $(document).ready(function () {

        $("button#submitComment").click(function () {

            // Get the div containg the comment list
            var commentList = $("#comments");

            // Get the ID of the last comment displayed so server 
            // can query recent non-displayed comments
            var lastId = $(".comment h4").last().attr("id");

            // Get data to post to server
            var commentData = "EntryId=" + $("input#EntryID").val()
                              + "&Comment=" + $("textarea#Comment").val()
                              + "&LastId=" + lastId;

            $.post(
                "/find/Comments/Comments",
                commentData,
                function (data) {
                    alert(data); // confirm server response

                    newComments = $(data).hide(); // hide elements so they can be animated after adding them to the DOM

                    commentList.append(newComments); // add to DOM

                    $(".comment").each(function () {
                        $(this).slideDown("fast") // animate
                    });

                    $("#Comment").attr("value", ""); // clear comment form
                }
            );

        });
    });

</script>

Этот скрипт отправляет комментарий на сервер. сервер отвечает с помощью разметки размещенного комментария и любых комментариев, опубликованных с момента публикации пользователем страницы.

Когда сервер возвращает разметку для одного комментария, он прекрасно работает. когда сервер отвечает более чем одним комментарием, то firefox обдувает прокладку. Я получаю эту ошибку JavaScript:

Ошибка: необработанное исключение: [Exception ... "Не удалось преобразовать аргумент JavaScript arg 0 [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost:3437/Scripts/jquery-1.4.1.min.js :: аноним :: строка 130 "данные: нет]

Эта ошибка исходит от ядра jQuery, и я не знаю точно, что ее вызывает. Я знаю, что если я уберу .hide() и .slideDown() и просто добавлю разметку, то это будет работать без проблем. Но я хочу модные анимации слайдов: -)

Есть предложения?

Редактировать

Вот пример ответа сервера:

<div class="comment" style="background:#eee; border:1px solid gray; padding:10px 10px 0 10px; margin-bottom:20px;">
    <h4 id="94">Admin commented on Thursday, December 23, 2010 10:21 AM</h4>
    <p>
    asd
    </p>
</div>

<div class="comment" style="background:#eee; border:1px solid gray; padding:10px 10px 0 10px; margin-bottom:20px;">
    <h4 id="105">Owner commented on Thursday, December 23, 2010 10:27 AM</h4>
    <p>
    asd
    </p>
</div>

<div class="comment" style="background:#eee; border:1px solid gray; padding:10px 10px 0 10px; margin-bottom:20px;">
    <h4 id="106">Admin commented on Thursday, December 23, 2010 10:27 AM</h4>
    <p>
    asd
    </p>
</div>

Answer 1

Ах, вместо того чтобы делать $ (data) .hide (), делайте

$(data).find('.comment').hide()

Или $ (data) .find ('. Comment'). Attr ('style', 'display: none')

Конечно, второй перезапишет ваш атрибут стиля.Вы можете также обернуть все это в промежуток или дел.

Answer 2

Это привело меня на правильный путь.Моя проблема была вызвана моим массивом, содержащим не-jquery объекты в нем.Когда я распечатал его на консоли, я получил что-то вроде

[jquery-div, <TextNode textContent=" ">, jquery-div]

Когда я изменил свой ".hide ()" на ".filter (" div "). Hide ()", это исправило ошибку.