jquery animate 怎么延迟执行

Posted 2023-05-13

参考技术A 在jQuery中，通过animate()可以实现元素的动画显示，但在显示的过程中，必须要考虑各种客观因素和限制性条件的存在，因此，在执行动画时，可通过stop()方法停止或delay()方法延时某个动画的执行．stop()与delay()方法的语法调用格式介绍如下：
　　stop()方法的格式如下：
　　stop([clearQueue],[gotoEnd])
这个方法的功能是停止所选元素正在执行的动画，其中可选参数[clearQueue]是一个布尔值，表示是否停止正在执行的动画，另外一个可选参数[gotoEnd]也是一个布尔值，表示是否立即完成正在执行的动画．
　　dylay()方法的格式如下：
　　delay(duration,[queueName])
这个方法的功能是设置一个延时值来推迟后续队列中动画的执行，其中参数duration为延时的时间值，单位是毫秒，可选参数[queueName]表示队列名词，即动画队列．本回答被提问者采纳

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

我试图在用户在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();

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

答案

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

下面是一个例子

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

时间以毫秒为单位设置。

该 拖延 函数用于jQuery的效果，包括动画，其他的东西最好使用 setTimeout.

另一答案

我建议使用动画的 complete 回调 暂停音频。它在动画结束后，也就是在音频渐变完成后启动。

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

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

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

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

或者，使用一个 另一种格式 来指定选项。

.animate( properties, options )

我还建议使用 stop() 以防止动画排队。否则，在快速悬停触发时，动画的积累会让人感到困惑。

下面是一个示范。

$(function() {

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

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

});

<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>

以上是关于jquery animate 怎么延迟执行的主要内容，如果未能解决你的问题，请参考以下文章

[ jquery 效果 delay(duration,[queueName]) ] 此方法用于对队列中的下一项的执行设置延迟

delay()延迟

jQuery - .animate() 在滚动时非常延迟

jQuery.animate() 似乎将持续时间参数作为延迟 [重复]

jquery 延迟执行方法

jQuery 的延迟回调执行序列