javascript - 如何在更改 div 内容时添加淡入淡出效果？

Question

目前我有以下脚本...

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

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

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

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

Answer 1

使用fadeOut()完成函数参数:

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