0

Eu tenho uma div que contem 12 trabalhos e um botão em baixo (ver mais) que carrega mais 12 trabalhos, o problema é que se eu tentar $('#wrapperTrabalhos').append(data).hide().fadeIn(); toda a div (#wrapperTrabalhos) faz fadeIn, ou seja faz o hide() e depois fadeIn() e eu só queria que os 12 novos trabalhos carregados é que tivessem esse efeito.

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++;
}
}
3
  • O que tem nesse data? HTML? texto?
    – Sergio
    Commented 14/11/2014 às 16:09
  • Vou fazer update à questão para se perceber melhor
    – Miguel
    Commented 14/11/2014 às 16:11
  • contem mais 12 thumbnails, cada um com uma imagem mais texto (descrição do trabalho etc...)
    – Miguel
    Commented 14/11/2014 às 16:13

1 Resposta 1

3

Sugiro converter esse data em elementos do DOM e escondê-los. Só depois fazer o append. Algo assim:

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();
    }
}

Assim nessas 3 primeiras linhas a ordem é:

  1. converter em elementos via jQuery e esconder
  2. fazer append desses elementos escondidos
  3. fazer fadeIn() só desses novos elementos
1
  • 1
    Muito Obrigado @Sergio é mesmo isso
    – Miguel
    Commented 14/11/2014 às 16:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .