Delay loading content until jquery slide finishes

[matthewamzn]

I'm trying to use jquery to slide open a div and then start playing a video. It's working, but the video spills over the div while it's sliding open. How can I delay loading the video?

<script type="text/javascript">
$(document).ready(function(){
$("a.video_show").click(function(){
$("div#video").slideToggle();
});
});
</script>

<div id="video" style="display:none;">
video player code
</div>

<div id="play_video">
<a href="#" class="video_show">
<img src="img/video.png" />
</div>

[coopster]

setTimeout?
[developer.mozilla.org...]

[delboy1978uk]

set timeout? hmm. i was about to post a similar question, but this might be what im looking for.

im loading the contents of an html file into a div
but before it changes it fades the old content out
loads the data
and fades back in
only the data loads and replaces during the fade :-s

[matthewamzn]

I actually did it by adding another div and using a callback function. I'm not sure if this is very readable, but it looks something like this:

<script type="text/javascript">
$(document).ready(function(){
$("a.video_show").click(function(){
$("div#video").slideDown("normal",function(){
$("div#video_player").css("display","block");
});
return false;
});
$("a#hide_video").click(function(){
$("div#video_player").css("display","none");
$("div#video").slideUp();
return false;
});
});
</script>

// the video player
<div id="video" style="display:none;">
<div id="close_video"><a href="#" id="hide_video" class="video_hide">X</a></div>
<div style="height:202px;">
<div id="video_player" style="display:none;">
<?php include("video.php"); ?>
</div>
</div>

// link that initiates the video
<a href="#" class="video_show"><img src="img/video.png" alt="Play Video" />Video</a>
</div>