jQuery .animate 函数在切换选项卡时行为不正确答案

【问题标题】：jQuery .animate function not behaving properly when switching tabsjQuery .animate 函数在切换选项卡时行为不正确
【发布时间】：2014-08-21 13:37:42
【问题描述】：

上下文

我的网页在后台播放 HTML 音频，该音频具有淡出/淡入功能，该功能使用 jQuery .animate 函数在淡出时将音量设置为 0，在淡入时将其设置为 1。

我已经实现了页面可见性 API：https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

这用于检测用户是否切换选项卡。

Currently I have the fade out function being called on the audio when the tab goes from visible to hidden and the fade in function being called when going from hidden to visible:

fadeOut(id){
   $(id).animate({volume: 0}, 1000});
}
fadeIn(id){
   $(id).animate({volume: 1}, 1000});
}

问题

当切换选项卡时，从可见到隐藏，fadeOut 函数被调用，但是它不是从音量 1 缓慢变为 0，而是在 1 秒后直接变为 0，但是当它从隐藏变为可见时，它会按预期执行，从 0 到 1 缓慢。我尝试过切换功能，它似乎只在从可见到隐藏时发生。这是 jQuery .animate 函数的实现特性吗？还是我错过了什么？

每个步骤的控制台日志输出

当从隐藏变为可见时：

"步进时间：" 0 " 体积：" 0

"步进时间：" 42" 体积：" 0

"步长：" 44" 体积：" 0.025049273427930594

“步长：”51“卷：”0.026579017009366445

"步长：" 60" 体积：" 0.030591727271815305

...

"步进时间：" 1000 " 体积：" 1

从可见到隐藏

"步长："1000"卷："1

"步进时间：" 0 " 体积：" 0

【问题讨论】：

我不确定，因为没有使用音频元素，但这可能是因为您在切换标签时隐藏或删除了它？发布您的选项卡的小提琴，以便我们更轻松地调试

标签： javascript jquery html audio jquery-animate

【解决方案1】：

我发现“.animate”函数执行的是优化问题。当页面“隐藏”时 - 您正在查看另一个选项卡 - jQuery 将跳过动画步骤，因为查看器实际上无法看到动画。这对于实际动画来说非常有用，但在这种情况下，当使用声音时，它会直接从 1 跳到 0，从而跳过中间的步骤。

我在 API 中找不到这点，这有点烦人。

我目前的解决方案是创建自己的“动画”函数，以降低递归 setTimeout 循环中的声音级别。

【讨论】：

【解决方案2】：

这样的？

$(id).animate({volume: 0}, 1000);

来自这篇文章。 html5-audio-playback-with-fade-in-and-fade-out

【讨论】：