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

jQuery取代Vimeo嵌入淡入和淡出

2 个答案:

更新