hide() 可以正常工作，但 fadeOut() 不能正常工作？

Question

我有一个带有保持帧和视频的 jquery 幻灯片。单击保持帧时，我希望它淡出并且视频淡入并播放。

它适用于 show() 和 hide()，但是当我将其更改为 fadeIn() 和 fadeOut() 时，整个事情就会崩溃。

知道为什么会发生这种情况吗？

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

这就是我想要完成的任务，

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

但这会导致图像不会淡出，而是留在原处，而隐藏的视频出现在其下方。

Answer 1

您需要使用 .fadeOut() （和 .fadeIn()) 正确使用回调。因此，您正在寻找的方法签名是：

.fadeOut( [duration] [, callback] )

我必须预测您的标记是什么样子，但一般来说这并不太困难。使用：

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

您可以：

$(".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/

这样做的好处（其中我我相当确定我在不知情的情况下修改了您的标记和 CSS），您可以在同一页面上拥有多个视频播放器，并且它们不会发生冲突：

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

由于我不熟悉您的视频播放器，您必须修改它才能在 上播放正确的视频.fadeIn() 回调。

Answer 2

如果您想用 fadeIn() 替换 show() 并使用回调，您需要使用与 fadeIn() 关联的速度：

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

有关更多信息： http://api.jquery.com/fadeIn/

Answer 3

http://jsfiddle.net/pA58v/

<button class="holdFrame1">test</button>

<video class="hiddenVideo1" style="border:1px solid #000"></video>​


$(document).ready(function() {

$(".hiddenVideo1").hide();  

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


});