當我更改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()); 
}) 

所以，如果我點擊與類一個div「運動」它會然後... 刪除類中的任何東西'描述'，並取代與'體育'的ID的內容。然後它將採用與「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); 
});