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

【问题标题】：Add delay before pausing audio in jQuery在jQuery中暂停音频之前添加延迟
【发布时间】：2023-03-14 04:37:01
【问题描述】：

当用户将鼠标悬停在 div 上时，我正在尝试淡入/淡出音频文件。

淡入工作，但音频在淡出完成之前暂停。

这是我当前的代码：

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

有人知道我哪里出错了吗？

【问题讨论】：

标签： jquery audio hover delay

【解决方案1】：

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

这是一个例子

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

时间以毫秒为单位。

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

【讨论】：

【解决方案2】：

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

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

使用这种格式提供回调函数：

.animate(属性[, 持续时间] [, 缓动] [, 完成])

完成
类型：函数()
动画完成后调用的函数，每个匹配元素调用一次。

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

.animate（属性，选项）

我还建议使用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>

【讨论】：