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?
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>
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.
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 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