Getting AJAX to .append(data) with a delay or queue - php

Question

So due to a lack of sleep or pure misunderstanding I am having troubles getting a piece of jQuery code to work.
So please community your my only hope :P
I have a jQuery function which executes upon an element onClick="" attribute
<div id="next" onClick="choice('next', '<? echo $page; ?>')"></div>
Basically what I am trying to achieve is thus: to have an element fade out then call a PHP script via AJAX grab the relevant data and that data to the previously hidden element discussed earlier and then fade said element back into focus.
The problem I am having is that no matter what I do (using .queue or setTimeout) or just using the standard 'fx' queue in jQuery the AJAX data always loads ASAP and any attempt to delay does not work.
Below is the code, thank you in advance for any help.
function choice(value, page) {
var timer;
$.get("http://<? echo ROOT; ?>includes/forms.php", { choice: value, page: page }, function(data) {
clearTimeout(timer);
$("#slideOut-inner").fadeOut(2000).empty();
timer = setTimeout(show, 2200);
function show() {
$("#slideOut-inner").append(data).fadeIn(2000);
}
});
}

Answer 1

Set the delay outside of $.get's success callback, otherwise it will only happen once client receives the response from the server:
$("#slideOut-inner").fadeOut(2000, function() {
$(this).empty();
$.get("http://<? echo ROOT; ?>includes/forms.php", {
choice: value,
page: page
}, function(data) {
$("#slideOut-inner").append(data).fadeIn(2000);
});
});

Answer 2

Try putting the append() in the callback of the fadeOut():
$.get("http://<? echo ROOT; ?>includes/forms.php", { choice: value, page: page }, function(data) {
$("#slideOut-inner").fadeOut(2000, function() {
$(this).empty()
.append(data).fadeIn(2000);
}).empty();
});