I am currently working on a practice project that involves loading each page via AJAX and displaying a fadeIn, fadeOut transition using CSS animation opacity.
However, I am facing an issue where the addClass and removeClass functions are not being executed as expected.
Here is the JavaScript (jQuery) code snippet:
$(document).ready(function() {
$(".aboutBtn").click(function(e) {
e.preventDefault();
var pageTitle = $(this).text();
var pageUrl = $(this).attr('href');
changePage(pageUrl, true, pageTitle);
});
function changePage(url, bool, pageTitle){
$('#wrapper').addClass('animate');
loadContent(url, bool, pageTitle);
}
function loadContent(url, bool, pageTitle){
$.ajax({
url: './' + url,
type: 'get',
contentType: 'html',
success: function(data){
// Load content
$('#content').html(data);
// Change URL
if(url != window.location){
window.history.pushState({path: url}, pageTitle, url);
}
},
complete: function(){
$('#wrapper').removeClass('animate');
}
});
}
});