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

所以，如果我点击“体育”课程的div，那么...... 使用类'description'删除div中的任何内容，并使用id为'sports'的div的内容替换。然后它将使用类'descriptiveImage'获取div，并将其替换为div的内容，其id为'sportsImage'。

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

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

Answer 1

使用fadeOut() on-complete函数参数：

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

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

1 个答案: