jQuery用淡入淡出替换Vimeo嵌入

Question

我想淡出 Vimeo 通用嵌入（iframe 版本），暂停它，淡入另一个，然后自动播放。我的代码淡出并暂停第一个视频，但立即引入新的（没有淡入淡出），然后不自动播放。我猜这是语法问题。我正在使用 froogaloop js 库来控制 Vimeo API。

想法？感谢您的帮助！

HTML：

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

    $('#behind').hide();
    $('#bts').click(function() {
        $('#regular').fadeOut(400);
        var player=$f($('.vid:visible')[0]);
        player.api('pause');
        $('#behind').fadeIn(400);
        player.api('play');
    });

Answer 1

jQuery 的.fadeIn() 和.fadeOut() 在动画运行时不会阻止进一步的代码执行。如您所见，这意味着播放器在淡出开始时立即暂停，然后立即开始淡入，并且播放器取消暂停。

如果要在动画完成时使用执行代码，则需要使用（可选）回调参数：

$('#bts').click(function() {
    $('#regular').fadeOut(400, function () {
        $f(this).api('pause');
        $('#behind').fadeIn(400, function () {
            $f(this).api('play');
        });
    });
});

Answer 2

你已经定义了

var player=$f($('.vid:visible')[0]);

并使用相同的 var player 进行操作（暂停和播放）

player.api('pause')player.api('play)`

顺便说一句，你用这段代码做了什么

var player=$f($('.vid:visible')[0]);

更新

我希望这会起作用（原始代码）

$('#behind').hide();
$('#bts').live('click',function() {
    $('#regular').fadeOut(400,function(){
        $f(this).api('pause');
    });
    $('#behind:hidden').fadeIn(400,function(){
        $f(this).api('play');
    });      
})

注意：感谢@Matt Ball