Question

I have a jquery slideshow with hold frames and videos. When the hold frame is clicked, I want it to fade out and the video to fade in and play.

It works with show() and hide(), but when I change it to fadeIn() and fadeOut() the whole thing breaks.

Any idea why this is happening?

          $('.holdFrame1').click(function(){  
            $(".holdFrame1").delay(500).hide();         
            $(".hiddenVideo1").show(
            function(){          
               $f(players[0]).api('play');                                                                                                                     
});

This is what I would like to accomplish

          $('.holdFrame1').click(function(){  
            $(".holdFrame1").delay(500).fadeOut('slow');         
            $(".hiddenVideo1").show(
             function(){          
               $f(players[0]).api('play');                                                                                                                     
       });
      });

But that causes the image not to fadeOut, but rather stay in place while the hidden video appears below it.

Answer 1

You need to use .fadeOut() (and .fadeIn()) correctly with callbacks. So the method signature you’re looking for is:

.fadeOut( [duration] [, callback] )

I have to predict what your markup looks like, but in general this isn’t too difficult. Using:

.videoContainer {
    background: grey;
    height: 400px;
    width: 560px;
    padding: 10px;
}
.holdFrame,
.hiddenVideo {
    width: 100%;
    height: 100%;
}
.holdFrame {
    background: green;
}
.hiddenVideo {
    background: yellow;
    display: none;
}

<div class="videoContainer">
    <div class="holdFrame">Click to play video.</div>
    <div class="hiddenVideo">Video will be here.</div>
</div>

You can:

$(".holdFrame").click(function(){
    var $this = $(this);

    $this.fadeOut(500, function(){
        $this.siblings('.hiddenVideo').fadeIn(500, function (){
            $f(players[0]).api('play');
        });
    });
});

http://jsfiddle.net/yeRxP/

The nice thing about this (in which I’m fairly certain I’ve modified your markup and CSS without knowing it), you can have more than one video player on the same page and they won’t conflict:

http://jsfiddle.net/yeRxP/2/

Since I’m not familiar with your video player, you’ll have to modify it to play the correct video on the .fadeIn() callback.