CODEWITHSUNDEEP
javascriptjqueryajax
phamousphil
phamousphil

Reputation: 254

jQuery fade in content while using Ajax .append()

Trying to use something like jQuery .fadeIn() on a 'load more' button pulling JSON html markup from the server on .append(response). syntax like .append(response).fadeIn('slow'); does not seem to work, I believe its a DOM issue because the data is appended to the page before .fadeIn() has a chance to work.

Any suggestions for how to accomplish this type of effect? my JavaScript is below. 

$(function () {
var offset = 10;

$(".load-more-cell").click(function() {
    $.post("load-more-notifications", {offset: offset, limit: 30}, 
        function (response) {
        $(".notification-table-body").append(response);
        offset += 30;
    });
});
});

Upvotes: 2

Views: 766

Answers (1)

Ram
Ram

Reputation: 144699

append returns the current collection, i.e. ".notification-table-body" elements, it doesn't contain the appended elements, if you want to call the fadeIn on the appended elements you should at first create a collection that contains them and then call the method:

$(response).hide().appendTo('.notification-table-body').fadeIn();

Upvotes: 3

Related Questions