Show hide 2 DIVs with Jquery in x amount of seconds

I have two div's. The video div contain flash video. The photo div contains an image.

<div id="container">
<div id="video">flash embed file</div>
<div id="photo" style="display:none;">image</div>
<div>

I want to display the video div for x amount of seconds, then hide the video, then fade to the photo div.

It would be great if the code was reuseable because I have 4 sets of video/image divs on one page

TIA

Thanks for the quick respo开发者_如何学运维nse everyone

In the end I went with 'mu is too short''s solution. It uses Jquery, was simplistic and works in all 5 main browsers

<script type="text/javascript">
$(document).ready(function(){
n = 20; // Or however many seconds you want to delay.
setTimeout(function() {
    $('#video').fadeOut();
    $('#photo>').fadeIn();
}, n * 1000);
});
</script>

<div id="container">
<div id="video">flash embed file</div>
<div id="photo" style="display:none;"><a href="#">image</a></div>
<div>

You could whip something up with setTimeout:

// Once the video is playing...
n = 2; // Or however many seconds you want to delay.
setTimeout(function() {
    $('#video').fadeOut();
    $('#photo').fadeIn();
}, n * 1000);

You should be able to wrap that in a utility function or plugin quite easily.

You'd probably want this:

#container {
    position: relative;
}
#video, #photo {
    position: absolute;
    top: 0;
    left: 0;
}

to stack them on top of each other. For example (using just images): http://jsfiddle.net/ambiguous/tquxa/

For example you can try something like this:

function fadeInOut(delay, id1, id2)
{
    $('#' + id1).delay(delay).fadeOut(400);
    $('#' + id2).delay(delay).fadeIn(400);
}

Hope this helps :)

Use class!

DEMO jsFiddle

$('.video').delay(3000).fadeTo(400,0);
$('.photo').delay(3000).fadeTo(400,1);

and CSS:

.video, .photo{
   position:absolute;
}

.

There are flash players that have javascript API's, for instance I use FlowPlayer (http://flowplayer.org/documentation/api/index.html). This specific player allows you to create the player on-the-fly and then use a javascript API to capture events and control the video.

When you create a flash video player using flowplayer's javascript method you can set an "onFinish" event handler that will hide the movie and show the photo.

The benefit of using an event handler for when the movie is finished playing is that the whole movie will play through for everyone on every connection speed. If you set a timeout the user may have to buffer and miss the end of the video (or for people on really slow conenctions they may miss the movie all together).

Here is some sample code from the flowplayer website:

$f("player1", "flowplayer.swf", {
    clip: {
        url: 'KimAronson-TwentySeconds59483.flv',
        autoPlay: true,
        autoBuffering: true
    },
    plugins: {
        controls: null
    },
    onLoad: function(){
        alert("player loaded");
    }
    onFinish: function() {
        $('#video').hide(); 
        $('#photo').show();
    }
});

A NOTE: also you need to check your wmode parameter for your flash video. A flash video set to a wmode of default (or "window") will display over other content even if its z-index is set lower or it is hidden. Set it to opaque or transparent so that html objects can appear over (and under) the flash object. Opaque mode allows objects to be over the flash object, and transparent mode allows objects to be over and under the flash object (giving the flash object transparency).

ANOTHER NOTE: Flowplayer (and I believe there are some others) are pretty cool because there are a plethora of events you can hook into and lots of controls you can use for your videos.

You want/need to chain the effects. You can do that using the callback function feature:

function delayHideThenFadeIn (delay, startNode, endNode)
{
    $('#' + startNode).delay (delay).hide (function () {
        $('#' + endNode).fadeIn ('slow');
    } );

}

delayHideThenFadeIn (1000, 'video', 'photo');

See it in action at jsFiddle.