Question

我正在尝试对新添加的slideDown()使用jQuery <div>效果。

这是我的Javascript代码。

$.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);
});

这有效，但slideDown()适用于整个#dj_song_list，而不仅仅是附加的<div>。如何将其应用于新添加的<div>？

这是我的HTML结构供参考

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

songs_dj.html

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

Answer 1

你想这样做：

$.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/

我完全按照你的意愿行事：

同样对于您的代码，您可以将响应附加到隐藏的div，然后可以将其向下滑动：

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

改变这个：

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

进入这个：

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

新添加的div上的jQuery slideDown

3 个答案: