再生ボタンをクリックした後にビデオを遅らせる

Question

絶対幅のビデオを絶対位置、画像をクリックすると再生するdiv、ビデオの上にテキストを含むdivがあります。

フェードアウトするテキストの再生ボタンをクリックした後、テキストがフェードアウトした後、ビデオがフェードインするようにするには、ビデオがフェードアウトするための一時停止ボタンをクリックします後でテキストがフェードインするようにします。

何かに近いものを実現しましたが、何らかの理由で再生ボタンをクリックしたときにビデオフェードインを遅らせることができません。 2回目のクリック後、正常に動作するようです。ここで

は私のコードです：

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

私はページの下部にスクリプトを追加しました。

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

機能で：

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

Answer 1

、タイムアウト機能を使用しよう上記の呼び出しは、フェードアウトアニメーションが完了したときにのみトリガされます。 #divを正しいIDに変更する必要があります。

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

Answer 2

フェードアウトが完了機能のために渡すことができる別のオプションのパラメータがあります：あなたは遅れを持たせたい場合は