Как сделать анимацию при append?

Question

[drtvader]

Привет!
Как при append сделать плавное появление блоков?

$('.js-show-more').bind("click", function(){
        $.ajax({
            url: 'json/show_more.json',
            method: 'GET',
            dataType: 'json',
            success: function (json) {
                if (json['product'].length > 0) {
                    var product = json['product'];
                    var last_block = false;
                    $.each(product, function (id, data) {
                        append_block = $('.js-product-list');
                        var html = '<li class="b-product-slider__item b-product-slider__item--catalog">\
                                        <a href="javascript:void(0);" title="' + data.name + '" data-id="' + data.id + '" class="b-product-slider__link b-product-slider__link--catalog">';
                                        if (parseInt(data.finger) > 0) {
                                            html += '<span class="b-icon b-icon--catalog">\
                                                <span class="b-icon__icon-back b-icon__icon-back--catalog-sticker b-icon__icon-back--sticker"></span>\
                                            </span>'
                                        } else if (parseInt(data.new) > 0) {
                                            html += '<span class="b-icon b-icon--catalog">\
                                            <span class="b-icon__icon-back b-icon__icon-back--catalog b-icon__icon-back--catalog-novinka"></span>\
                                            </span>'
                                        }
                                            html += '<span class="b-product-slider__image-wrap b-product-slider__image-wrap--catalog">\
                                                <img src="' + data.image + '" alt="" class="b-product-slider__image b-product-slider__image--catalog">\
                                            </span>\
                                            <span class="b-product-slider__info b-product-slider__info--catalog">\
                                                <span class="b-product-slider__title">' + data.name + '</span>\
                                                <span class="b-product-slider__text b-product-slider__text--catalog">\
                                                    <span>' + data.text + '</span>\
                                                </span>\
                                                <span class="b-product-slider__more-link b-product-slider__more-link--catalog">\
                                                    <span>ПОДРОБНЕЕ</span>\
                                                </span>\
                                            </span>\
                                        </a>\
                                    </li>';
                        append_block.append(html);
                        if (('last' in data) && (data.last)) {
                            $(".js-show-more").fadeOut().remove();
                        }
                    });
                    return false;
                }
            }
        });
    })

Answer 1

[drtvader]

Добавил класс всем новым блокам. Через него анимирую.
show_block = $('.animate');
append_block.append(html);
show_block.fadeIn('slow').css("display", "inline-block");