jQuery replace Vimeo embed with fade in and fade out

Question

I'd like to fade a Vimeo universal embed (iframe version) out, pause it, fade in another one, and autoplay it. My code fades out and pauses the first video, but immediately brings in the new one (without the fade) and then doesn't auto play it. I'm guessing it's a syntax issue. I'm using the froogaloop js library to control the Vimeo API.

Ideas? Thanks for your help!

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's .fadeIn() and .fadeOut() do not block further code execution while the animation runs. This means, as you're seeing, that the player is paused as soon as the fade out begins, and immediately after that, the fade in begins, and the player is unpaused.

You need to use the (optional) callback argument if you want to use execute code when the animation is complete:

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