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

我有一个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');                                                                                                                     
       });
      });

---

但这会导致图像不会淡出，而是在隐藏视频显示在图像下方时保持不变。

如果要将show（）替换为fadeIn（）并使用回调，则需要使用与fadeIn（）相关的速度：

有关更多信息：

测试
​
$（文档）.ready（函数（）{
$（“.hiddenVideo1”）.hide（）；
$（'.holdFrame1'）。单击（函数（）{
$（.holdFrame1”）.delay（500.hide（）；
$（“.hiddenVideo1”）.show（）；
$f（玩家[0]）.api（'play'）；
});
});

您需要在回调中正确使用（和）。因此，您要查找的方法签名是：

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

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

---

由于我不熟悉您的视频播放器，您必须对其进行修改，以便在

.fadeIn（）

回调中播放正确的视频。

您所说的“整个过程都中断了”是什么意思？到底发生了什么？它没有做什么，或者它做错了什么？我能看看你的fadeIn和fadeOut代码的例子吗？如果我在hide（）中放入任何类型的参数（'slow'），视频没有隐藏，隐藏的图像显示在它的正下方。事实上，给出的任何答案都不能解决您的问题，这意味着您的问题不在这里。我尝试了这一点，fadeIn工作正常，但顶部的初始图像不会消失，除非我将其更改为隐藏（）。我希望它淡出（）。尝试删除淡出延迟？我已删除延迟，但它仍然不会淡出。隐藏它仍然有效。你能解释一下。兄弟姐妹在这个函数中做了什么吗？我把

点击播放视频。

和

视频会在这里。

放在一起，所以我使用

.sibles（）

来选择要显示的元素。如果页面上有多个

hiddenVideo

，则不能像在代码中那样选择

.hiddenVideo

，而不显示每一个。这只是一种封装和定位动作的方法。每个隐藏的视频都有一个唯一的ID。hiddenVideo1、.hiddenVideo2等等。这样，我可以根据单击的保持帧淡出。我不明白为什么会出现类似

$（'.holdFrame1'）。单击（function（）{$（this）。淡出（1000，function（）{$(“.hiddenVideo1”）.show（）；$f（players[0]）.api（'play'）；}）；}）；

不起作用，但标准的hide（）是的。这些不是

id

s，而是类名。您没有正确使用

class

和

id

属性。如果使用

.hiddenVideo1

选择，则这是一个类，类是按性质分组的。您可以使用

id=“hiddenVideo1“

和

#hiddenVideo1

，如果您愿意，但正如我在代码中所演示的（在删除

1、2、3

等之后），如果您正确处理代码和类结构，您实际上不需要这样做。

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