新添加的div上的jQuery slideDown

Question

I'm trying to use the jQuery slideDown() effect on my new appended <div> 's.

Here is my Javascript code.

$.ajax({
    type: "GET",
    url: "/loadmore/dj/",
    data: {
        'slug': $('.dj_slug').text().trim(),
        'song_rank': $("#dj_song_list").find('.song_block').length
    },
}).done(function (response) {
    $('#dj_song_list').append(response).hide().slideDown(1000);
});

This works but the slideDown() is applied to the entire #dj_song_list and not just the appended <div> 's. How can I apply it to just the newly appended <div> 's?

Here is my HTML structure for reference

<div id='dj_song_list'>
    {% include 'hunt/songs_dj.html' %}
</div>

songs_dj.html

<div class="song_block">
    ...
    ...
    ...
</div>

Answer 1

You want to do this:

$.ajax({
    type: "GET",
    url: "/loadmore/dj/",
    data: {
        'slug': $('.dj_slug').text().trim(),
        'song_rank': $("#dj_song_list").find('.song_block').length
    },
    dataType: 'html'
}).done(function (response) {
    $(response).appendTo($('#dj_song_list')).hide().slideDown(1000);
});

Answer 2

http://jsfiddle.net/7cws8/1/

I have done exactly what you want:

Also for your code you can append response to a hidden div and then can slide it down:

$.ajax({
    type: "GET",
    url: "/loadmore/dj/",
    data: {
        'slug': $('.dj_slug').text().trim(),
        'song_rank': $("#dj_song_list").find('.song_block').length
    },
}).done(function (response) {
    $('#dj_song_list').append("<div id='response-content' style='display:none;'>"+response+"</div>");

$("#response-content").slideDown(1000);

});

Answer 3

Change this:

 $('#dj_song_list').append(response).hide().slideDown(1000);

Into this:

 $('#dj_song_list').append(response);
 $('#dj_song_list').find('div').last().hide().slideDown(1000);