Question

我似乎遇到了jQuery淡出功能的问题。当按下键Z时，视频淡入并开始播放，当按下键X时，视频应逐渐消失。现在发生的事情是淡入效果正在发挥作用但是当我按下X时，视频不会消失但只会暂停。如果有人可以帮助我，那将是一个巨大的帮助！

＆＃13;

$(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);
    }

  });
});

＆＃13;

<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">
			    <source src="media/video/media.mp4" type="video/mp4">
		    </video>
  </div>
</body>

</html>

＆＃13;

Answer 1

音量范围只能介于0.0和1.0之间。

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

Answer 2

volume属性的范围应为0到1.将$('#video').animate({volume: 100.0}, 1000)更改为$('#video').animate({volume: 1.0}, 1000)，它将正常工作。

淡出不使用jQuery

2 个答案: