call back function for jQuery post

I have the following code:

$('#country-list').change(function() {
    country = $('#country-list').val();

    $('td').fadeOut("slow", function() {
        $.post("/gsm/findtariff/country:"+country+"/",
        function(data){
            $('#incoming').html(data.incoming);
            $('#national').html(data.national);
            $('#callsToUk').html(data.toUk);
            $('#international').html(data.otherInternational);
            $('#sms').html(data.sms);
        }, "json");
        $('td').fadeIn();
    });
});

So basically when a country is chosen from my drop down box (#country-list) it should fade out all of the tds in my tariff table, change their values 开发者_如何学JAVAwith the returned post data, and then fade them back in again. However with my current code the td's are fading back in before their values have been changed. How can I get the fadeIn() function to only execute once all of the data has been set?

Thanks

You should have $('td').fadeIn(); inside your callback function

$('td').fadeOut("slow", function() {
        $.post("/gsm/findtariff/country:"+country+"/",
        function(data){
            $('#incoming').html(data.incoming);
            $('#national').html(data.national);
            $('#callsToUk').html(data.toUk);
            $('#international').html(data.otherInternational);
            $('#sms').html(data.sms);
            $('td').fadeIn();
        }, "json");
    });

Move the fadeIn call up one line.