jQuery mouseout 停止播放？

Posted 2023-02-25

【中文标题】jQuery mouseout 停止播放？

【英文标题】：Jquery mouseout stop playing?

【发布时间】：2015-01-21 19:38:37

【问题描述】：

大家晚上好， 我不知何故陷入了一个简单的问题，但无法弄清楚如何解决它。我是第一次玩 jquery。

现在在 mouseenter 上它可以正常播放音频文件，但我尝试实现 on mouseout 功能来停止播放音频文件。 我只是无法让它工作。

我希望有人可以帮助我，这会很棒:)

<div class="buttonmit2ani">

            <audio id="beep-one"  preload="auto">
                <source src="audio/baby.mp3"></source>
                <source src="audio/beep.ogg"></source>
                Your browser isn't invited for super fun time.
            </audio> 
            <script>
              var beepOne = $("#beep-one")[0];
              $(".buttonmit2ani")
                .mouseenter(function() 
                  beepOne.play();
              );
            </script>               

</div>

【问题讨论】：

你的“mouseout”处理程序在哪里？您不应该在.mouseenter 处理程序之后立即添加它吗？请参阅：.mouseleave 它应该调用理论上的.stop() 函数。那不工作吗？另外，beepOne.play(); 之后的 大括号在哪里？

【参考方案1】：

试试这个：

var beepOne = $("#beep-one")[0];

$('.buttonmit2ani').mouseover(function()
    beepOne.play();
).mouseout(function()
    beepOne.stop(); // need to write this method or .pause()
);

【讨论】：

很好，唯一的问题是我认为<audio> 标签没有.stop() 函数。试试.pause()。

是的，这只是一个您需要编写的抽象方法。谢谢。 （我更新了代码）:)

【参考方案2】：

没有.stop() 函数（至少在 Chrome 中没有）。使用.pause()

var beepOne = $("#beep-one")[0];
$(".buttonmit2ani").mouseenter(function() 
  beepOne.play();
).mouseleave(function() 
  beepOne.pause();
);

.buttonmit2ani 
  width: 100px;
  height: 100px;
  background-color: #E9EAEE;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonmit2ani">
  <audio id="beep-one" preload="auto">
    <source src="audio/acdc.ogg">
      Your browser is not invited for super fun time.
  </audio>
</div>