2017-11-08 8 views
0

jQueryのフェードアウト機能に問題があるようです。キーZが押されるとビデオがフェードインして再生を開始し、キーXが押されるとビデオは消えます。何が起きているのはフェードインが機能していることですが、Xを押すと動画はフェードアウトしませんが一時停止します。誰かが私を助けることができれば、それは大いに役立つでしょう!フェードアウトがjQueryで動作しない

$(document).ready(function() { 
 

 
    $('#video').animate({ 
 
    volume: 0.0 
 
    }, 500); 
 
    $('.name').fadeTo(1000, 1); 
 

 
    $(document).keypress(function(event) { 
 

 
    var key = (event.keyCode ? event.keyCode : event.which); 
 

 
    if (key == 122) { 
 
     $('.name').fadeTo(1000, 0); 
 
     setTimeout(function() { 
 
     $('.video').fadeTo(1000, 1); 
 
     $('#video').animate({ 
 
      volume: 100.0 
 
     }, 1000); 
 
     document.getElementById('video').play(); 
 
     }, 1500); 
 
    } else if (key == 120) { 
 
     event.stopPropagation(); 
 
     $('.video').fadeOut('slow'); 
 
     $('#video').animate({ 
 
     volume: 0.0 
 
     }, 1000); 
 
     setTimeout(function() { 
 
     document.getElementById('video').pause(); 
 
     }, 1000); 
 
    } 
 

 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Narrabundah College Fashion Show</title> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <script type="text/javascript" src="scripts/jquery.js"></script> 
 
    <script type="text/javascript" src="scripts/jquery-ui.js"></script> 
 
    <script type="text/javascript" src="scripts/script.js"></script> 
 
</head> 
 

 
<body> 
 
    <!-- Media Video --> 
 
    <div class="name"> 
 
    <h1>Tim's Film</h1> 
 
    </div> 
 
    <div class="video"> 
 
    <video id="video" controls="true"> 
 
\t \t \t  <source src="media/video/media.mp4" type="video/mp4"> 
 
\t \t  </video> 
 
    </div> 
 
</body> 
 

 
</html>

+0

ライブデモはありますか? – Pedram

+0

あなたはこれをチェックしたいと思うので、うまく動作します。https://jsfiddle.net/xfp53thn/2/ –

答えて

0

容積範囲は、0.0と1.0の間とすることができます。

$('#video').animate({volume: 1.0}, 1000); 
0

ボリュームプロパティが$('#video').animate({volume: 1.0}, 1000)から0を1に変更$('#video').animate({volume: 100.0}, 1000)範囲である必要があり、それが正常に動作します。

関連する問題