Анимация для вставки через append()?

Question

[Сергей]

Добрый день, По клику на кнопку из БД подгружаю через ajax по несколько блоков $('#works').append(data); Подскажите, если ли адекватный вариант как-то анимировать эту вставку типа slideDown() jquery Структура блоков

<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

[Stalker_RED]

jsfiddle.net/z40rc89s

Прописываем анимацию transition
При добавлении элемента вешаем на него класс hidden или типа того.
После добавления - снимаем этот класс. Так, чтобы запустилась анимация.

Answer 2

[Владимир Проскурин]

jsfiddle.net/Lpndrf5h
UPD: т.е. сначала создаете элемент (но не размещаете это на странице), устанавливаете display: none (вызов hide() ), добавляете его на страницу (в ваш список) и вызываете анимацию показа .show('slow') или другую. Можно сделать на css анимациях, добавляя класс.