Fazy last month

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 last month

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 last month

maybe as the following:

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

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

Post Status

Asked in last month
Viewed 2,720 times
Voted 13
Answered 2 times

Search




Leave an answer