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++;
}
}