Wie kann ich eine Fade hinzufügen, wenn ich den Inhalt eines Divs ändere?

Question

Im Moment habe ich das folgende Skript haben ...

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

Wenn ich einen Abschnitt nehmen ...

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

So zu erklären Wenn ich mit der Klasse auf einem div klicken Sie auf ‚Sport‘ es wird dann ... Entfernen Sie alles in der div mit einer Klasse "description" und ersetzen Sie mit dem Inhalt eines div mit der ID "Sport". Dann wird das div mit der Klasse deskriptiveImage genommen und durch den Inhalt des div mit der ID von 'sportsImage' ersetzt.

Ich bin mir sicher, dass die meisten von euch das als generisches Ersatzskript erkennen werden.

Was ich tun möchte, ist das Skript so zu ändern, dass der vorhandene Inhalt der div.description ausgeblendet wird und dann der neue Inhalt eingeblendet wird. Ist das möglich?

Answer 1

Verwenden Sie die fadeOut() on-komplette Funktionsargument:

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