在 jQuery 中暂停音频之前添加延迟

Question

我试图在用户将鼠标悬停在 div 上时淡出 in/out 音频文件。

淡入有效，但音频在淡出完成前暂停。

这是我当前的代码：

$(function () {
    $('#playmusic').hover(
        function () {
            $('#music')[0].play();
            $('#music').animate({volume: 1}, 1000);
        },
        function () {
            $('#music').animate({volume: 0}, 1000);
            $('#music')[0].pause();    
        }
    )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="playmusic">hover to hear audio</p>

<audio id="music" preload="auto">
     <source src="https://upload.wikimedia.org/wikipedia/commons/e/ec/A_Tale_of_Distant_Lands.mp3" type="audio/mpeg">
</audio>

我想我需要在我的代码中添加一个 .delay 以便音频在淡出发生后暂停，但是以下给出了一个错误：

$('#music').delay(1000).[0].pause();

有谁知道我错在哪里？

Answer 1

如果你想延迟停止，可以用setTimeout来执行

这是一个例子

setTimeout(function(){
   $('#music')[0].pause();
}, 1000);

时间以毫秒为单位设置。

delay 函数用于 jQuery 效果，包括动画，其他更好使用 setTimeout.

Answer 2

我建议使用动画的 complete callback 来暂停音频。它在动画之后触发，即当音频淡入淡出完成时。

与使用独立计时器相比，此方法的一个优势在于，无论动画的持续时间如何，只要动画完成，音频就会暂停。

使用此格式提供回调函数：

.animate( properties [, duration ] [, easing ] [, complete ] )

complete
Type: Function()
A function to call once the animation is complete, called once per matched element.

或者，使用 alternate format 指定选项：

.animate( properties, options )

我还建议使用 stop() 来防止动画排队。否则，当快速悬停在触发器上和关闭触发器时，动画的累积会变得混乱。

这里有一个演示：

$(function() {

  let $music = $('#music');

  $('body').on('click', function() {
    $(this).addClass('clicked');
  });

  function playMusic() {
    $music
      .stop(true, false)
      .animate({
        volume: 1
      }, {
        duration: 1000,
        start: function() {
          this.play();
        }
      });
  }

  function pauseMusic() {
    $music
      .stop(true, false)
      .animate({
        volume: 0
      }, {
        duration: 1000,
        complete: function() {
          this.pause();
        }
      });
  }

  $('#playmusic').hover(
    playMusic,
    pauseMusic
  );

});

body {
  min-height: 100vh;
  transition: background-color 200ms;
}

body.clicked {
  background-color: #FFFFF5;
}

#playmusic {
  display: inline-block;
  padding: 0.25em 0.5em;
  background-color: #EEF;
  cursor: pointer;
  transition: background-color 200ms, opacity 200ms, margin-left 200ms;
  border-radius: 0.25em;
  visibility: hidden;
  opacity: 0;
  margin-left: -100%;
}

body.clicked #playmusic {
  visibility: visible;
  opacity: 1;
  margin-left: 0;
}

body.clicked #playmusic:hover {
  background-color: #DDFFDD;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Click the page first to interact with the document.</p>
<p id="playmusic">Hover to hear audio</p>

<audio id="music" preload="auto" allow="autoplay" autoplay>
    <source src="https://upload.wikimedia.org/wikipedia/commons/e/ec/A_Tale_of_Distant_Lands.mp3" type="audio/mpeg">
</audio>

在 jQuery 中暂停音频之前添加延迟

Add delay before pausing audio in jQuery

audio

jquery

delay

hover