How can I use Jquery to slidedown elements that were hidden before adding to DOM?

I thought this was fairly simple. But, it's turning out to not be. I am working with this code:

<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=" + $("t开发者_JS百科extarea#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>

This script posts the comment to the server. the server responds with the markup form the posted comment, AND any comments posted since the user posted the page.

When the server returns markup for a single comment it works great. when the server responds with more than one comment then firefox blows a gasket. I get this JavaScript error:

Error: uncaught exception: [Exception... "Could not convert JavaScript argument 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 :: anonymous :: line 130" data: no]

That error is coming fom jQuery core, and I'm not sure exactly what's triggering it. I do know that if I remove the .hide() and the .slideDown() and just append the markup, then it works without a hitch. But I want fancy slideDown animations :-)

Any suggestions?

Edit

Here's an example of the server's response:

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

Ah, Instead of doing $(data).hide() do

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

Or $(data).find('.comment').attr('style','display:none')

Of course the second one would overwrite your style attribute. You could wrap the whole thing in a span or div also.

This led me on the right path. My problem was caused by my array containing non-jquery objects in it. When I printed it to console, I got something like

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

When I changed my ".hide()" to ".filter("div").hide()" it fixed the error.