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>
ライブデモはありますか? – Pedram
あなたはこれをチェックしたいと思うので、うまく動作します。https://jsfiddle.net/xfp53thn/2/ –