Fadein only in elements loaded by Ajax with append

Question

I have a div that contains 12 jobs and a button below (see more) that loads 12 more jobs, the problem is that if I try $('#wrapperTrabalhos').append(data).hide().fadeIn(); entire div (#wrapperTrabalhos) makes fadein, ie makes the hide() and then fadeIn() and I just wanted the 12 new jobs loaded to have that effect.

Jquery:

var worksLoaded = $('#wrapperTrabalhos a').length;
var projectsToLoad = 12;

$.ajax({
    type: 'GET',
    url: 'Ajax/AjaxSearch.php',
    data:{'from':worksLoaded, 'projectsToAdd': projectsToLoad},
    beforeSend: function() {
        //alert();
    },
    success: function(data) {

        $('#wrapperTrabalhos').append(data).hide().fadeIn(2000);

        var projectsLoaded = $('#wrapperTrabalhos a').length;
        var totalProjects = parseInt($('#wrapperTrabalhos a:last-child').attr('data-totalProjects'));
        if (projectsLoaded === totalProjects) {
            $('#viewMoreBtn').remove();
        }
    }
});

Ajaxsearch.php:

if (isset($_GET['from'], $_GET['projectsToAdd'])) {
$from = $_GET['from'];
$projectsToAdd = $_GET['projectsToAdd'];
$projects = $dataBase->fetchProjectsPagination($from, $projectsToAdd);
$countWork = $from+1;
$totalProjects = count($dataBase->fetchAllProjectsByDisplayOrder());
foreach ($projects as $workSeveralImg) {
    echo '<a href="project.php?name=' .$workSeveralImg->short_name. '" data-count="' .$countWork. '" data-project_id="' .$workSeveralImg->id. '" data-totalProjects="' .$totalProjects. '" id="' .$workSeveralImg->short_name. '" title="' .$workSeveralImg->description. '"><img alt="' .$workSeveralImg->description. '" src="admin/' .$workSeveralImg->image_path. '"><div class="detailsHover"><span>\'' .$workSeveralImg->description. '\'</span><p>' .$workSeveralImg->type. '<br>' .$workSeveralImg->brand. '</p></div><div class="detailsHoverMob"><span>\'' .$workSeveralImg->description. '\'</span><p>' .$workSeveralImg->type. '<br>' .$workSeveralImg->brand. '</p></div></a>';
    $countWork++;
}
}

Answer 1

I suggest converting this date into DOM elements and hiding them. Only then make the append. Something like that:

success: function (data) {
    var novoConteudo = $(data).hide();
    $('#wrapperTrabalhos').append(novoConteudo);
    novoConteudo.fadeIn(2000);

    var projectsLoaded = $('#wrapperTrabalhos a').length;
    var totalProjects = parseInt($('#wrapperTrabalhos a:last-child').attr('data-totalProjects'));
    if (projectsLoaded === totalProjects) {
        $('#viewMore').remove();
    }
}

So in these first 3 lines the order is:

1. convert to elements via jQuery and hide
2. append these hidden elements
3. fadein() only from these new elements