CODEWITHSUNDEEP
jqueryhideshow
John Verber
John Verber

Reputation: 755

Hide will not show after delay and fadeIn()

I have a little video have playing when the page loads. I've hidden the header, but when i use fadeIn(), it doesn't show. Can anyone help me out with this? 

<html>
<head>
    <style>
        #wrapper{width: 99%; margin: auto; text-align: center;}
        #header{width: 99%; margin: 35px auto; text-align: center; display: none;}
        #main{width: 99%; margin: 35px auto; text-align: center;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            Hello
        </div>
        <div id="main">
            <video width="600" height="400" autoplay>

                <source src="countdown.webm" type="video/webm">
                Your browser does not support the video tag.
            </video>

        </div>
    </div>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        $(document).ready(function() {
            $("video").delay(5000).fadeOut(2000);
            $("header").show();
        });
    </script>
</body>
</html>

Upvotes: 0

Views: 170

Answers (1)

mrmoment
mrmoment

Reputation: 757

For your specific code posted above, you are calling "header" tag name element, not id='header' div element. Change your jquery part to

$('#header').show();

Or if you want to do sequence animations. Just put the second animation in the callback function when the first animation is done. Something like 

$("video").fadeOut(2000,function(){
   $("#header").show();
});

Upvotes: 1

Related Questions