Delay ajax OnBegin until fadeOut of DOM - MVC5 - ajax

Question

I am trying to fade out a div containing html from a partial view when a user clicks on a link and fade in the newly fetched partial view. The problem I am having is that sometimes my view is fetched before the fadeout of the original partial view is finished so I end up seeing the partial views switch out, fade out, then fade back in again. Is there a way to delay the ajax request until the fade out is complete?
Here is the order of operations I am trying to achieve.
User clicks link > partial view A fades out > new partial view is fetched via ajax > partial view B fades in.
This is what is happening at times
User clicks link > partial view A begins to fade out but partial view B comes in before it finishes fading > partial view B fades out > partial view B fades back in again.
#Ajax.ActionLink("Me", "ManageUserAccount", null, new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "ajax-update",
InsertionMode = InsertionMode.Replace,
OnBegin = "ajaxBegin",
OnSuccess = "ajaxSuccess"
}, new { #class = "active" })
#Ajax.ActionLink("Alerts", "ManageAlerts", null, new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "ajax-update",
InsertionMode = InsertionMode.Replace,
OnBegin = "ajaxBegin",
OnSuccess = "ajaxSuccess"
}, new { #class = "active" })
<div id="ajax-update">
#Html.Action("ManageUserAccount")
</div>
<script type="text/javascript">
function ajaxSuccess() {
$('#ajax-update').fadeIn();
//sometimes the new partial view is returned before this even finishes its job
}
function ajaxBegin() {
$('#ajax-update').fadeOut();
}

Answer 1

i make a very similar function... but i use get, done and effect. and works! I use to make a complex website without postback, change partial is in the menu for simulate the change page
$(".menu-button").click(function (e) {
var id = e.target.id;
var urlID = document.URL.split('#')[1];
if (id != urlID) {
location.hash = id;
changepartial(id);
}
});
function changepartial(id)
{
var path = "../home/"+id;
getOut();
$.get(path).done(function (result) {
//done is for wait get result after make the next step.
$("#Contenant").html(result);
getIn();
});
}
function getOut() {
$("#Contenant").effect('drop', { direction: 'left' }, 100);
}
function getIn() {
$("#Contenant").effect('slide', { direction: 'right' }, 1000);
}