Javascript 当我更改div的内容时，如何添加淡入淡出？

目前我有以下脚本

$(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());
    })
});

如果我用一节来解释

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

所以如果我点击“体育”类的div，它就会。。。 删除div中具有类“description”的任何内容，并替换为id为“sports”的div的内容。然后它将获取具有“descriptiveImage”类的div，并将其替换为id为“sportsImage”的div的内容

我相信你们大多数人都会认识到这是一个相当通用的替换脚本

我想做的是更改脚本，使div.description的现有内容淡出，然后新内容淡入。这可能吗？

使用on complete函数参数：

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