Question

I update the html with ajax call. I need to add element as hidden and then apply animation:

$.ajax({
    success: function (data, textStatus) {
        $(".comments").prepend(data);
        $(".comments .comment-frame:first").slideDown("slow"); // it doesn't work, since element is visible

Data added:

<div class="comment-frame">
...
</div>

I can not modify css to make class comment-frame hidden, since I already have other elements on the page with the same class, which should remain visible. So, somehow I should add that data as hidden. How can I do it?

Answer 1

You can make a jQuery object out of data and .hide() it before .prepend()ing it to $(".comments").

$.ajax({
    success: function (data, textStatus) {
        var $data = $(data).hide();
        $(".comments").prepend($data);
        $(".comments .comment-frame:first").slideDown("slow");