double calls ajax using jquery

Question

two calls:

$('#add').live('click', function() {

    $('.simplebox').slideUp(200, function() {
        $('html, body').animate({scrollTop:140}, 350, function() {
            $('#loading-add').slideDown(300, function() {
                $.ajax({
                    type: "POST",
                    url: "..",
                    data: getDataToPost(),
                    cache: false,
                    success: function(data){

                        alert(data);

                        $('#loading-add').delay(1000).fadeOut(200, function() {
                            $('#successfull-add').fadeIn(200);
                        });

                    }
                });
            });
        });
    });

})

But if i call to the ajax immediately after the live event, it calls on time (as it should be):

$('#add').live('click', function() {
                $.ajax({
                    type: "POST",
                    url: "..",
                    data: getDataToPost(),
                    cache: false,
                    success: function(data){

                        alert(data);

                        $('#loading-add').delay(1000).fadeOut(200, function() {
                            $('#successfull-add').fadeIn(200);
                        });

                    }
                });
})

There are any ideas why it happens? really strange..

Thank you.

Answer 1

Try using queue() :

$('.simplebox').slideUp(200);
$('.simplebox').queue(function() {
    $('body').animate({scrollTop:140}, 350);
    $('body').queue(function() {
        $('#loading-add').slideDown(300);
        $('#loading-add').queue(function() { 
            //ajax call
        });
    });
})