jQuery fadeOut() and fadein() timing

Question

I've a simple problem with jQuery, checkout this: http://jsfiddle.net/4Q5uQ/

How to fadeIn() the box after the fadeOut() effect is completed?

Can you clarify what you mean a bit? Right now the fadeout happens first then a fadein happens. Do you want to reverse this? — Vincent Ramdhanie, Oct 16 '11 at 04:44
@VincentRamdhanie no. If you run that code and you click on the "Link 2" you can see the two effect is in overlay. I would to run the fadeOut() and when is totally completed, trigger fadeIn() on the `$(".box[data=" + data + "]")`. — Fred Collins, Oct 16 '11 at 04:47

score 5 · Accepted Answer · answered Oct 16 '11 at 04:49

5

I think you want two things:

The fading <div>s should be in the same place so they don't move around.
You want to fade out the visible <div> and then fade in the other <div>.

The first can be done by wrapping the two <div>s in a relatively positioned <div> and then absolutely positioning the inner <div>s:

<div class="wrapper">
    <div id="div_1" data="1" class="box">
        test_1
    </div>
    <div id="div_2" data="2" class="box">
        test_2
    </div>
</div>

And:

div.wrapper {
    position: relative;
}
div.box {
    /* ... */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

The second is just a matter of adding :visible to your fadeOut selector:

$(".box:visible").fadeOut(1000, ...

Updated fiddle: http://jsfiddle.net/ambiguous/jAP2b/

answered Oct 16 '11 at 04:49

mu is too short

426,620
70
833
800

Only an information: why should we fix the div with the `position` css property? I mean why the second div isn't in the same place of the first div if I hide the first one. – Fred Collins Oct 16 '11 at 05:08
1

@Fred: Strictly speaking you don't need the absolute positioning with your current animation, adding `:visible` gets the right `
` out of the way before the next one comes in. However, with the positioning, you could fade-out and fade-in at the same time without changing the HTML or CSS. You don't need it but it doesn't hurt and gives you a bit more flexibility on how you want to animate things.
– mu is too short Oct 16 '11 at 05:20

score 1 · Answer 2 · answered Oct 16 '11 at 05:11

Following code may be your need: http://jsfiddle.net/4Q5uQ/5/

$(document).ready(function() {
    $("a").click(function() {
        var fin = $(this).attr('fin');
        var fout = $(this).attr('fout');
        $("#div_" + fout).show();
        $("#div_" + fin).hide();
        $(".box[data=" + fout + "]").fadeOut(4000, function() {
            $(".box[data=" + fin + "]").fadeIn(4000);
        });
    });
});

jQuery fadeOut() and fadein() timing

2 Answers2