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），你可以在同一页面上拥有多个视频播放器并赢得了＃39 ; t：冲突：

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');              
      });


});

hide（）工作正常，但不是fadeOut（）？

3 个答案: