FadeIn only in elements loaded by Ajax with append

Question

FadeIn only in elements loaded by Ajax with append

Navigation

#1 by (3 votes)

0

I have a div that contains 12 jobs and a button down (see more) that loads 12 more jobs, the problem is that if I try to $('#wrapperTrabalhos').append(data).hide().fadeIn(); all div ( #wrapperTrabalhos ) does fadeIn, 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++;
}
}

jquery ajax fadein

asked by anonymous 14.11.2014 / 17:07

1 answer

Difference between repeater_itemdatabound and repeater_itemcommand Fade out on the div but not on your children with jQuery

score 3 · Accepted Answer

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

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:

convert to elements via jQuery and hide

append these hidden elements

make fadeIn () only of these new elements