javascript - jQuery:动画序列图像

Question

所以在过去的几天 里，我一直在努力让它发挥作用。虽然一些 SO 成员已经帮助了我很多，但我仍然觉得我走错了路，因为我就是无法让它工作。

这是一个Fiddle .

基本上，我想根据滚动位置动态添加/删除类 .show 到 .container 中的图像。在发布的示例中，我只是尝试向下滚动。
如果您滚动得非常轻且缓慢，您会发现它确实有效，但速度太快 - 这就是问题所在。
我的想法是定义一些东西，比如在事情发生之前必须滚动的阈值，但不知何故我没有得到想要的结果。

此外，scroll 事件似乎在浏览器中不定期触发，所以我不知道如何通过它获得平滑的移动/过渡。我已经看过教程中的一些示例代码，它似乎总是有效!为什么不用我的例子？这与我的 CSS 有关系吗？

请帮助我，我现在真的很沮丧。

例如 that tutorial page并查看源代码。有一个名为 ScrollCount 的变量，每次函数运行时它都会递增。当 ScrollCount 达到 3 时，一些动画内容完成并且 ScrollCount 重置为 1。这样，根据评论，每滚动三个像素，鸟的翅膀就会发生变化。

但根据对我的代码的观察，这不可能是真的，因为触发该函数的 scroll 事件似乎或多或少是随机触发的——滚动得越快，像素越多被“跳过”了——至少在我的代码中是这样，所以一定是有问题。

Answer 1

将动画元素与滚动事件的数量联系起来会产生不一致的结果。关于 sample page you linked ，动画与绝对滚动位置和滚动事件的数量相关联，这会产生一些奇怪的结果。

ScrollView 的方法有很多种，所有方法都会产生不同数量的滚动事件和滚动距离。

• 鼠标滚轮(受系统鼠标设置、鼠标分辨率影响)
• 键盘上下键(受系统按键重复率影响)
• 上下翻页(可能受其他一些设置影响？)
• 拖动滚动条(受各种影响)

然后所有这些可能会根据浏览器的不同表现不同。

简而言之？将动画绑定(bind)到滚动事件的数量 对我来说听起来像是个坏主意。相反，为什么不将其绑定(bind)到滚动位置呢？

function animateHorse() {
    var currentScrollPosition = window.pageYOffset;
    var imageIndex = Math.round(currentScrollPosition / scrollResolution);

    if (imageIndex >= pictureCount) {
        imageIndex = pictureCount - 1; // Select last image
    }

    $("#container img").hide();
    $("#container img").eq(imageIndex).show();
}

And here's the fiddle.