Fade out a div with content A, and Fade In the same div with content B

Question

I have the following:

$(function() {
    $('.ajaxloader').click(function(event) {
        var target = $(this).attr('href');
        window.location.hash = target;
        $('#conteudoInscricao').fadeOut('slow', function() {
            $.ajax({
                url: target,
                    success: function(data) {
                        $('#conteudoInscricao').html(data);
                        $('#conteudoInscricao').fadeIn('slow');
                    }
            });
        });
        return false;
    });
});

This works almost ok. The thing is... the effect is not smooth. I mean, first it fades out the content A, then it stays blank, and then it fades IN content B.

What I would like is to ease the effect so that, while he is fading out really near the end, he starts to fade in so that the effect could be smooth.

How can that be achieve regarding the code below?

Thanks a lot in advance, MEM

dubrox · Accepted Answer · 2010-11-27T00:05:24.973

5

Try this:

$(function() {
    $('.ajaxloader').click(function(event) {
        var target = $(this).attr('href');
        window.location.hash = target;
        $.ajax({
            url: target,
            success: function(data) {
                $('#conteudoInscricao')
                    .fadeOut('slow', function() {
                        $(this).html(data).fadeIn('slow');
                    });
            }
        });
        return false;
    });
});

So the effect will happen only after you have retrieved your data, avoiding any time gap to wait the data response.

edited Nov 27 '10 at 00:05

answered Nov 26 '10 at 23:50

dubrox

664
6
11

1

You'll need to queue your `.html()` call. Right now, even though it is second in line, it will execute immediately. – user113716 Nov 26 '10 at 23:52
@MEM - If @dubrox doesn't update in a couple minutes, I'll update his answer at the bottom. – user113716 Nov 26 '10 at 23:56
@dublox - I believe that the fadeOut will not happen on the right time. First I will get the information that is there OUT, then it will fadeOut and fadeIn the new information. And that is not the intended result unfortunately. :( – MEM Nov 26 '10 at 23:57
1

@dubrox - Good update. Just a couple notes I'd make. First, inside the callback, you should use `$(this)` instead of doing a DOM selection with `$('#conteudoInscricao')`. Second thing is less important. You can still place the `.fadeIn()` call where it was after the `.fadeOut()` because animations are automatically queued. May make it a little easier to read, though the outcome will be identical. :o) – user113716 Nov 27 '10 at 00:01
@MEM : try the last edit I made, it now makes the html substitution and fadein as callback of fadeout. – dubrox Nov 27 '10 at 00:03
@dubrox and @patrick dw: thanks a lot. So, what we do to solve the issue, is to add a call back fade out on sucess, and on that fade out, call another call back that will fade in with the new data? I start to notice that by using callbacks we do a lot of smooth effects... but I'm not yet getting, why will the callback allows that, and call a function after another don't ? Thanks – MEM Nov 27 '10 at 00:04
1

As AJAX calls are usually async, you can fire it at some point and obtain the data only after the server response is fully received. So the "success" callback will be called only some milliseconds after you made the AJAX call, during that time, if you fired other animations, those will run without waiting the data. To wait the data before doing other stuff, simply put all those stuff inside the AJAX callback. Callbacks, in general, are used to assure that some actions will be run after a given event is completed. – dubrox Nov 27 '10 at 00:13
I'm thing about callbacks like, something that runs after a function a function execution but that is still inside that function, does this makes sense? – MEM Nov 27 '10 at 00:28
1

@MEM - You've probably noticed that when you run an animation, your other javascript code continues to work. In other words it doesn't freeze up. The reason is that while javascript typically executes in order, there are a few function calls that are taken out of the normal flow. These type of calls are used to create animations. So if animations are removed from the normal flow of javascript, how can you execute something *after* an animation? The answer is that it needs to be taken care of manually. jQuery does this for you. – user113716 Nov 27 '10 at 01:06
1

...You pass the code that should execute after the animation as a *callback* argument. jQuery ensures that the function you passed will get called after the animation is complete. If you don't pass it as a callback, it executes immediately. Why? Again, because animations are removed from the normal flow of javascript execution. So an animation doesn't prevent other javascript (like `.html()`) from executing. – user113716 Nov 27 '10 at 01:08
I will need to proper study your points. :) Thanks a lot for your time and clarification. :) – MEM Nov 27 '10 at 01:21

score 0 · Answer 2 · answered Nov 26 '10 at 23:47

0

At the moment it wont, because the fadeIn wont start until the fadeOut has finished!

answered Nov 26 '10 at 23:47

benhowdle89

36,900
69
202
331

1

And this would be a comment, rather than an *answer*, surely? – David Thomas Nov 27 '10 at 00:01

Fade out a div with content A, and Fade In the same div with content B

2 Answers2

Linked