jquery loading animation issue - css

Question

I'm trying to hide the menu, show animated gif, hide gif, return updated menu.
The menu disappears and reappears, but the animated gif won't show.
What am I doing wrong?
$(document).ready(function () {
$("#menu").wijmenu({
orientation: 'vertical'
});
$("#TDButtons a").click(function () {
var href = $(this).attr("href");
$('#menuAjax').hide(0, LoadAjaxContent(href));
return false;
});
function LoadAjaxContent(href) {
$.ajax({
url: href,
success: function (data) {
$("#menuAjax").html(data)
.addClass("loading")
.delay(5000)
.removeClass("loading")
.fadeIn('slow');
$("#menu").wijmenu({
orientation: 'vertical'
});
}
});
}
Please let me know if you need more info. Thanks

Answer 1

It doesn't show cause you are delaying something that isn't a queueable animation:
.addClass("loading")
.delay(5000)
.removeClass("loading")
.fadeIn('slow');
is interpreted like:
.addClass("loading")
.removeClass("loading")
.delay(5000)
.fadeIn('slow');
You could do:
function LoadAjaxContent(href) {
$.ajax({
url: href,
success: function (data) {
$("#menuAjax").html(data).removeClass("loading").fadeIn('slow');
$("#menu").wijmenu({ orientation: 'vertical' });
}
});
}
$("#TDButtons a").click(function (e) {
e.preventDefault();
var href = this.href;
$('#menuAjax').addClass("loading").hide();
LoadAjaxContent(href);
});

Answer 2

You are adding, removing the loading class from the element once the data is already received. You should do it with ajaxStart and ajaxStop function which eventually adds the loading class before the request is send and removes once the ajax operation is completed.
$(document).ready(function () {
$("#menu").wijmenu({
orientation: 'vertical'
});
$("#TDButtons a").click(function () {
var href = $(this).attr("href");
$('#menuAjax').hide(0, LoadAjaxContent(href));
return false;
});
$.ajaxStart(function(){
$("#menuAjax").addClass("loading");
});
$.ajaxStop(function(){
$("#menuAjax").removeClass("loading");
});
function LoadAjaxContent(href) {
$.ajax({
url: href,
success: function (data) {
$("#menuAjax").html(data)
.delay(5000)
.fadeIn('slow');
$("#menu").wijmenu({
orientation: 'vertical'
});
}
});
}

Answer 3

You have your loading the wrong way round
Your class of loading should be added before the request is sent, and then removed after. You are adding it, (and as roXon pointed out using the .delay function incorrectly) and then removing it again, not giving it any time to be shown.
Try something like this
$(document).ready(function () {
$("#menu").wijmenu({
orientation: 'vertical'
});
$("#TDButtons a").click(function () {
var href = $(this).attr("href");
$('#menuAjax').hide(0, LoadAjaxContent(href));
return false;
});
function LoadAjaxContent(href) {
$("#menuAjax").addClass("loading")
$.ajax({
url: href,
success: function (data) {
$("#menuAjax").html(data)
//.delay(5000) Not needed!
.removeClass("loading")
.fadeIn('slow');
$("#menu").wijmenu({
orientation: 'vertical'
});
}
});
}