Sergey2018-06-10 16:51:16
Sergey, 2018-06-10 16:51:16

Animation for insertion via append()?

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>

$('body').on('click','#load-more-events', function(e){
    var category_id = $('#s02 .tabs li .active').attr('data-id'); // если посты уже отфильтрованы, то в кнопку для загрузки следующей страницы
    var page = $(this).attr('data-page'); // номер страницы для загрузки
    var button = $(this).parents('.shadowBtn');
        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");

Answer the question

In order to leave comments, you need to log in

2 answer(s)
Stalker_RED, 2018-06-10

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.

Vladimir Proskurin, 2018-06-10

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question