Javascript 用Jquery在x秒内显示隐藏2个div

我有两个div。视频div包含flash视频。photo div包含一个图像

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

闪存嵌入文件
形象

我想显示视频div x秒，然后隐藏视频，然后淡入photo div

如果代码是可重用的，那就太好了，因为我在一个页面上有4组视频/图像div

短暂性脑缺血发作

谢谢大家的快速回复

最后，我选择了“mu太短”的解决方案。它使用Jquery，非常简单，可以在所有5种主要浏览器中使用

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

$（文档）.ready（函数（）{
n=20；//或您希望延迟多少秒。
setTimeout（函数（）{
$（“#视频”）.fadeOut（）；
$（“#photo>”）.fadeIn（）；
}，n*1000）；
});
闪存嵌入文件

你可以用以下方法来激发灵感：

您应该能够很容易地将其包装到实用程序函数或插件中

你可能会想要这个：

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

---

把它们叠在一起。例如（仅使用图像）：

例如，您可以尝试以下方法：

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

---

希望这有帮助：）

使用

class

和CSS：

.video, .photo{
   position:absolute;
}

---

.

有些flash播放器具有javascript API，例如我使用的是FlowPlayer(http://flowplayer.org/documentation/api/index.html). 此特定播放器允许您动态创建播放器，然后使用javascript API捕获事件并控制视频

当您使用flowplayer的javascript方法创建flash视频播放器时，您可以设置一个“onFinish”事件处理程序来隐藏电影并显示照片

在电影播放结束时使用事件处理程序的好处是，在每个连接速度下，所有人都可以播放整个电影。如果您设置了超时，用户可能需要缓冲并错过视频的结尾（或者对于那些非常慢的人来说，他们可能会一起错过电影）

以下是来自flowplayer网站的一些示例代码：

$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(); } }); $f（“player1”、“flowplayer.swf”{ 剪辑：{ url:“KimAronson-TwentySeconds59483.flv”， 自动播放：对， 自动缓冲：对 }, 插件：{ 控件：null }, onLoad:function（）{ 警报（“玩家加载”）； } onFinish:function（）{ $（“#视频”）.hide（）； $（“#照片”）.show（）； } }); 注意：您还需要检查flash视频的wmode参数。设置为默认wmode（或“窗口”）的flash视频将显示在其他内容上，即使其z索引设置较低或隐藏。将其设置为不透明或透明，以便html对象可以显示在flash对象的上方（和下方）。不透明模式允许对象位于flash对象上方，透明模式允许对象位于flash对象上方和下方（使flash对象具有透明度）

---

另一个注意事项：Flowplayer（我相信还有其他一些）非常酷，因为有太多的事件可以连接，有很多控件可以用于视频。

你想要/需要链接效果。您可以使用以下方法完成此操作：

---

Patriotec。。。我们都喜欢在这里看到你用你的一些代码尝试一下。我想我应该坚持我所拥有的。我只能隐藏第一个DIV。不知道如何显示第二个DIV（看看我的演示！）

.video, .photo{
   position:absolute;
}

$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(); } });

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

}

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