Small issues with Jquery

On this page

there is a video area that has a red curtain that opens up with Jquery to reveal the video. The issue I am having is that the video is appearing too soon, before the curtains open all the way, so it does not look right. I have tried adjusting the timing, but there is no change. Does anyone have any ideas?

I can provide any source code needed, just ask

Thanks!

Have you tried using window.setTimeout() so that the code doesn’t execute until the curtain animation finished?

No, I haven’t. I have exactly zero experience with Javascript & Jquery…so I really am flying blind on this one.

Its pretty simple to use bud, all you need is the below and then all you need to do is add in your code to process the video where the comment is.

setTimeout(function() {
    // Normal javascript/jQuery code here
}, 500);

NOTE: Make sure to change 500 to the delay time (in milliseconds) so it shows the video after your curtain animation.

Here is what I have. Now the video does not ever appear. Hmmm. Am I doing this incorrectly?

<script type="text/javascript" src="http://billboardfamily.com/wp-content/themes/DeepFocus/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			
			// when user clicks inside the container...
			$('.curtain_wrapper').click(function(){
				
				//..animate the description div by changing it's left position to it's width (but as negative number)...
				$(this).children('.description').animate({'left': -1*$(this).width()});
				//...animate the 2 curtain images to width of 50px with duration of 2 seconds...
				$(this).children('img.curtain').animate({ width: 104 },{duration: 2000});

setTimeout(function() {
   //...show the content behind the curtains with fadeIn function (2 seconds)
				$(this).children('.content').fadeIn(2000);
}, 500);
				
				
			});
			
		});
	</script>

window.setTimeout($(this).children(‘.content’).fadeIn(2000), 1000);

Now the video pops in there, thanks.

This is so close to working properly. I am trying to get it to open the curtains, the background being black until they are totally opened, then the video fades in. I see where it is coded to fade in, but it is really just popping up all at once, and it starts out white, rather than black…hmmm.

Thanks for all the help, I think a little more tweaking and we can have this done. Any thoughts?

If that will not work, maybe just have the contents already appearing where it is supposed to be so when the curtain is drawn, the contents are slowly revealed as the curtain peels away. That would be acceptable if it is simpler.

Also, I have noticed some real differences between browsers on this issue.

Thanks!

oh,i’ve visiten yours website,it’s so beautiful!
if you want to starts out black,you can give this div background color.once the pop up it should be black.of course,you can write the background color in JS,you better use CSS define this div.
#div{
backgroud-color:#000;
}

I do not want it to start out black, if you look at the effect in Firefox, it works great. This does not happen in IE, or Safari, though. I need it to work right in all browsers

i’ve looken your web soure code,if you don’t start out black,you should modify the slide div background color;ohhhhhh~~~~

#slides {
background:#ffffff none repeat scroll 0 0;
}

I want the video to show, not a background color, and the curtains reveal the video as they open. It works perfectly in Firefox, if you use that browser