Animation for insertion via append()?

Question

css

Good afternoon, By clicking on the button from the database, I load through ajaxseveral blocks $('#works').append(data);Tell me if it is an adequate option to somehow animate this insert of the slideDown() jqueryBlock structure type

<div id="works">
        <div class="work"> content </div>
        <div class="work"> content </div>
        <div class="work"> content </div>
        <div class="work"> content </div>
    </div>

$('body').on('click','#load-more-events', function(e){
    e.preventDefault();
    var category_id = $('#s02 .tabs li .active').attr('data-id'); // если посты уже отфильтрованы, то в кнопку для загрузки следующей страницы
    var page = $(this).attr('data-page'); // номер страницы для загрузки
    var button = $(this).parents('.shadowBtn');
    $.ajax({
        type: "POST",
        url: window.wp_data.ajax_url,
        data : {
            action : 'get_projects',
            category_id : category_id,
            paged : page
        },
        success: function (data) {
            button.remove(); //удаляем кнопку
            $('#works').append(data); // добавляем в контейнер ответ с сервера
            $( "#s02 #works .button" ).insertAfter( "#s02 #works");
      checkWorkCategoryName();
        }
    });
});

Answer 1

jsfiddle.net/z40rc89s Adding a transition
animation When adding an element, add a hidden class or something like that to it. After adding - we remove this class. So the animation starts.

Answer 2

jsfiddle.net/Lpndrf5h
UPD: i.e. first you create an element (but don't place it on the page), set display: none (calling hide() ), add it to the page (in your list), and call the show animation .show('slow') or whatever. Can be done on css animations by adding a class.