淡出容器时 jQuery 重置可见视频

Question

我有一个带有容器的页面，其中通过新的通用嵌入从 vimeo 嵌入了多个视频。所有视频都位于一个较小的容器中，其中嵌入了 iframe 和描述视频的段落。 jQuery 最初隐藏了较小的容器，并根据您单击的缩略图动态选择并淡入适当的容器。无论哪个容器处于活动状态，都可以通过单击关闭按钮或容器外部（例如灯箱）来淡出。在所有具有视频的较小容器中，有一个具有两个视频，可以通过视频下方的链接在它们之间切换。加载后，视频 #regular 显示，单击链接会淡出，然后淡入 #behind。

我遇到的问题是，如果我打开一个视频，关闭它，然后打开同一个或另一个视频，Vimeo 播放器会被隐藏。带有各个段落信息的较小容器被完美地引入。

我编写的代码一次引入一个与您单击的缩略图相关的容器。我认为问题在于它明确隐藏了视频以适应单个视频切换。

感谢您的帮助！

HTML：

<div id="container">
    <div id="close"></div>
    <div id="tide" class="vim">
        <iframe class="vid" src="http://player.vimeo.com/video/1747304?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <p>
            "It's High Tide Baby!"<br />
            The Blackout feat. Ian Watkins (Lostprophets)<br />
            Fierce Panda
        </p>
    </div>
    <div id="knew" class="vim">
        <iframe class="vid" src="http://player.vimeo.com/video/4622464?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <p>
            "If Only They Knew"<br />
            A Rocket To The Moon<br />
            Fueled by Ramen/Atlantic Records
        </p>
    </div>
    <div id="fire" class="vim">
        <iframe id="regular" class="vid" src="http://player.vimeo.com/video/22327264?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <iframe id="behind" class="vid" src="http://player.vimeo.com/video/22466069?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <p style="float:left">
            "Sound of Fire"<br />
            This Century<br />
            Warner Brothers Records
        </p>
        <p id="bts" style="float:right;color:#000000;cursor:pointer;">
            &nbsp;<br />
            Click to launch the "Sound of Fire" behind the scenes video!<br />
            &nbsp;
        </p>
    </div>

JavaScript：

//Hide containers
$('.vim, #behind, #close, #container, #underlay').hide();

//Fade in video corresponding to thumbnail
$('.thumbnail').click(function() {
    var id = $(this).attr("id").replace("show_","").toLowerCase();
    $('#' + id + ', #close, #container, #underlay').fadeIn(400);
    var player=$f($('.vid:visible')[0]);
    player.api("seekTo", "0").api('play');

});

//Toggle between videos in the #fire div
$('#bts').click(function() {
    $('#regular').fadeOut(400, function () {
        $f(this).api('pause');
        $('#behind').fadeIn(400, function () {
            $f(this).api('play');
        });
    });
});

//Close whichever video is visible
$('#close, #underlay').click(function() {
    var $videos = $('.vid');
    $f($videos.filter(':visible')[0]).api('pause');
    $videos.hide();
    $('.vim, #close, #container, #underlay').fadeOut(400, function() {
        $videos.first().show();
    });
});

---

    $('#close, #underlay').click(function() {
        var $videos = $('.vid');
        $f($videos.filter(':visible')[0]).api('pause');
        $('.vim, #close, #container, #underlay').fadeOut(400, function() {
            $('#behind').hide();
            $('#regular').show();
        });
    });

Answer 1

$('#close, #underlay').click(function() {
    var $videos = $('.vid');
    $f($videos.filter(':visible')[0]).api('pause');
    $videos.hide();
    $('.vim, #close, #container, #underlay').fadeOut(400, function () {
        $videos.first().show();
    });
});

Answer 2

只需想一下代码中发生的情况以及顺序：

1. #fire 元素与 #regular 视频一起出现在前面。
2. 然后#regular 视频淡出，所以现在#behind 可见
3. 然后#fire 淡出，所以它不再可见。 #regular 也仍然明显淡出。
4. #fire再次打开。 #regular 仍然显式淡出，这就是 #behind 可见的原因。

您应该添加一个检查，当 #fire 显示或关闭时 #regular 是否可见。