how to stop callback until Animations in ajax beforeSend event have completed?

I am using slideUp and slideDown in the beforeSend ajax event which works fine is firefox, but in other browsers, the ajax postback seems to complete before the slideUpDown has completed so my success function is executed first, then the slideUp/Down.

How can I change it to either (1) no开发者_JS百科t send the ajax until the slideUp/Down have completed or (2) not process the result in the success function until the slideUp/Down have completed?

I tried creating a isAnimationFinished variable which is set when the slideDown has finished and in the success, I have an empty while loop that waits for this variable, but I get an error about a script running slowly if I try this.

Without seeing your code I'm not sure what each function is doing. My initial thought would be to separate the slide function from the ajax call so that the ajax function only runs after the slide function is complete.

If this isn't suitable please post some code we can work off. Thanks!

$.ajax({
        url: pageurl + "?data-role=button",
                                            beforeSend: function(){
                                                console.log('beforesend');
                                                animationBeforesend(); // loading bar
                                            },
                                            complete: function(){
                                                console.log('Compelete');
                                            },
        success: function (data) {
                                                var totalTime = new Date().getTime()-ajaxTime;
                                                console.log(totalTime + ' micro second page loading time');
                                                console.log('Success');
                                                console.log($('#progressbar').attr('value'));
                                                $(".Sitecontainer").html(data);
                                                loadFunction(); // loading bar HIDE
        }
    });