Search code examples
javascriptjqueryjquery-effects

jQuery fadeOut() and fadein() timing

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

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

Solution

  • I think you want two things:

    1. The fading <div>s should be in the same place so they don't move around.
    2. 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/