CODEWITHSUNDEEP
javascriptjquerycsshtml
Max Stones
Max Stones

Reputation: 3

jQuery .fadeOut not fading properly

I am having trouble implementing a simple toggle between two divs. I have searched and others seemed to have this problem too, except none of the solutions fixed mine. I want to have two divs, one (wrapper_static) showing on page load, and the other one hidden on page load (wrapper_animation). When I click the trigger div inside wrapper_static, I want the wrapper_static to fade out, and then have wrapper_animation fade in its place.

The problem so far is that only wrapper_animation has a fade animation when it's toggled, while wrapper_static waits for about one second and then suddenly dissapears.

I'd be very grateful if someone could help me out with this. I'll gladly provide any context details needed. HTML:

            <div id="wrapper_animation">
            <p>Yeah, it's working!</p>
        </div>

        <div id="wrapper_static" class="wrapper_dsk">
                <div id="hoverable" onclick="startDemo()" style="background-color:transparent;height:265px;width:500px;margin:auto;">
                    <span id="tooltip" style="z-index:5;position:absolute;margin-left:25px;">Click to see a cool transition!</span>
                    <object id="CSV" style="height:211px;width:300px;margin-left:50px;margin-top:50px;z-index:2;" type="image/svg+xml" data="images/logo.svg">Your browser does not support SVG. Sorry about that.</object>
                </div>
        </div>

CSS:

.wrapper_dsk {
display:block;
width:900px;
height:500px;
margin:auto;
margin-top:60px;
text-align:center;
opacity:1;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}

#hoverable {
    cursor:pointer;
}

#CSV {
    cursor:pointer;
    opacity:1;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

#tooltip {
    opacity:0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

#hoverable:hover #tooltip {
    opacity:1;
}

#hoverable:hover #CSV {
    opacity:0.8;
}

Javascript:

                    $( document ).ready(function() {
                    $( '#wrapper_animation' ).hide();
            });

            function startDemo(){
                $( '#wrapper_static' ).delay( 2000 ).fadeOut("medium");
                $( '#wrapper_animation' ).delay( 6000 ).fadeIn("medium");
            }

Upvotes: 0

Views: 707

Answers (1)

Pete TNT
Pete TNT

Reputation: 8403

Your description and delays seem like you are aiming for the animation to fadeIn after the fadeOut has completed, right?. Use fadeOut's complete option to achieve that instead:

function startDemo(){
    $( '#wrapper_static' ).fadeOut("medium", function(){
        //when complete, fade the animation in
        $( '#wrapper_animation' ).fadeIn("medium");
    });
}

Fiddle: http://jsfiddle.net/5DVEF/2/

Upvotes: 1

Related Questions