Question

我有一个div，其全长视频的位置为：absolute，在点击图片时播放，在视频顶部播放一些文字。

我想要的是当我单击顶部文本的播放按钮淡出并且文本淡出后，视频淡入，以及当我单击暂停按钮以使视频淡出时之后文字淡入。

我实现了接近我想要的东西，但出于某种原因，我第一次点击播放按钮时无法延迟视频淡入淡出。第二次点击后，似乎工作正常。

这是我的代码：

`<video preload="none" id="myVideo" width="100%" >
<source src="wp-content/themes/quill/images/video.mp4" type="video/mp4">
</video>`

`<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script> 
var vid = document.getElementById("myVideo"); 

function playVid() { 
    vid.play(); 
} 

function pauseVid() { 
    vid.pause(); 
} 
</script>

<script>
    $("#play").click(function(){
        $("#pause").fadeIn(1000);
        $("#myVideo").delay(1500).fadeIn(2000);
        $("#play").fadeOut(1000);
        $(".toph1").fadeOut(1000);
        $(".toph2").fadeOut(1000);
        $(".introduction").fadeOut(1000);
        $(".howitworks").fadeOut(1000);
        $(".logo").fadeOut(1000);
    });
</script>

<script>
    $("#pause").click(function(){
        $("#play").fadeIn(1000);
        $(".toph1").fadeIn(1000);
        $(".toph2").fadeIn(1000);
        $(".introduction").fadeIn(1000);
        $(".howitworks").fadeIn(1000);
        $(".logo").fadeIn(1000);
        $("#pause").fadeOut(1000);
        $("#myVideo").fadeOut(0);
    });
</script>`

我在页面底部添加了脚本。

Answer 1

如果您想延迟，请尝试使用超时功能：

setTimeout(function() {
    // do here..
}, 750)

Answer 2

Fadeout有另一个可选参数，可以为on complete函数传递：

  $( "#div" ).fadeOut( "slow", function() {
    setTimeout(function() {vid.play();}, 750)
  });

只有在淡出动画完成后才会触发上述调用中的函数。您需要将#div更改为正确的ID。

http://api.jquery.com/fadeout/#fadeOut-duration-complete

单击播放按钮后延迟视频

2 个答案: