How can I add a fade when I change the content of a div?

Question

At the moment I have the following script...

$(document).ready(function () {
    $('.manual').click(function () {
        $('.description').html($('#manual').html());
        $('.descriptiveImage').html($('#manualImage').html());
    })
    $('.excercise').click(function () {
        $('.description').html($('#excercise').html());
        $('.descriptiveImage').html($('#excerciseImage').html());
    })
    $('.electro').click(function () {
        $('.description').html($('#electro').html());
        $('.descriptiveImage').html($('#electroImage').html());
    })
    $('.acupuncture').click(function () {
        $('.description').html($('#acupuncture').html());
        $('.descriptiveImage').html($('#acupunctureImage').html());
    })
    $('.hydrotherapy').click(function () {
        $('.description').html($('#hydrotherapy').html());
        $('.descriptiveImage').html($('#hydrotherapyImage').html());
    })
    $('.sports').click(function () {
        $('.description').html($('#sports').html());
        $('.descriptiveImage').html($('#sportsImage').html());
    })
});

If I take one section to explain...

$('.sports').click(function () {
    $('.description').html($('#sports').html());
    $('.descriptiveImage').html($('#sportsImage').html());
})

So If I click on a div with the class 'sports' it will then... Remove anything in the div with a class 'description' and replace with the contents of a div with the id 'sports'. Then it will take the div with the class 'descriptiveImage' and replace it with the contents of the div witht he id of 'sportsImage'.

I'm sure most of you will recognize this as a rather generic replace script.

What I'd like to do is change the script so that the existing content of the div .description will fade out and then the new content will fade in. Is this possible?

Answer 1

Use the fadeOut() on-complete function argument:

$('.description').fadeOut(400, function() {
    $('.description').html($('#sports').html()).fadeIn(200);
});
$('.descriptiveImage').fadeOut(400, function() {
    $('.descriptiveImage').html($('#sportsImage').html()).fadeIn(200);
});