Fazy 5 days ago

How can I add a fade when I change the content of a div?

At the moment I have the following script...

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

If I take one section to explain...

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

So If I click on a div with the class 'sports' it will then... Remove anything in the div with a class 'description' and replace with the contents of a div with the id 'sports'. Then it will take the div with the class 'descriptiveImage' and replace it with the contents of the div witht he id of 'sportsImage'.

I'm sure most of you will recognize this as a rather generic replace script.

What I'd like to do is change the script so that the existing content of the div .descripti

Answers


inorganik 5 days ago

Use the fadeOut() on-complete function argument:

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


nikelyn 5 days ago

maybe as the following:

$('.description').fadeToggle();
$('.description').html($('#sports').html());
$('.description').fadeToggle();

http://api.jquery.com/fadetoggle/

Post Status

Asked in 5 days ago
Viewed 2,720 times
Voted 13
Answered 2 times

Search




Leave an answer