Javascript jQuery：为序列图像设置动画

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

这里有一个。

基本上，我希望根据滚动位置，动态地向

.container

中的图像添加/删除类

.show

。在发布的示例中，我只是尝试向下滚动。
如果你滚动得很轻很慢，你会发现它确实可以工作，但是太快了，这就是问题所在。
我的想法是定义一个阈值，在某些事情发生之前必须滚动，但不知何故，我没有得到期望的结果

另外，在浏览器中，

滚动

事件似乎不是经常触发的，所以我不知道如何使用它实现平滑的移动/转换。我已经看过一些教程中的示例代码，在那里它似乎总是有效的！为什么不举我的例子呢？这和我的CSS有关吗

请帮我的忙，我现在真的很沮丧

例如，看一看源代码。有一个名为

ScrollCount

的变量，每次函数运行时该变量都会递增。当

ScrollCount

达到3时，将完成一些动画内容，并将

ScrollCount

重置为1。这样，根据评论，每三个像素滚动一次，鸟儿的翅膀就会改变

---

但根据对我的代码的观察，这不可能是真的，因为触发该函数的

滚动

事件似乎或多或少是随机触发的-滚动越快，“跳过”的像素越多-至少在我的代码中是这样，所以一定是出了问题。

将动画元素与滚动事件的数量联系起来会产生不一致的结果。在示例中，动画与绝对滚动位置和滚动事件的数量相关联，这可能会产生一些奇怪的结果

滚动视图有很多不同的方式，所有这些方式都会产生不同数量的滚动事件和滚动距离

• 鼠标滚轮（受系统鼠标设置、鼠标分辨率的影响）
• 键盘上下键（受系统键重复率影响）
• 上下翻页（可能受其他设置影响？）
• 拖动滚动条（受各种因素影响）

然后，根据浏览器的不同，所有这些都可能表现出不同的行为

简言之？将动画与滚动事件的数量联系起来对我来说是个坏主意。相反，为什么不将其绑定到滚动位置

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

---

将动画元素与滚动事件的数量联系起来会产生不一致的结果。在示例中，动画与绝对滚动位置和滚动事件的数量相关联，这可能会产生一些奇怪的结果

滚动视图有很多不同的方式，所有这些方式都会产生不同数量的滚动事件和滚动距离

• 鼠标滚轮（受系统鼠标设置、鼠标分辨率的影响）
• 键盘上下键（受系统键重复率影响）
• 上下翻页（可能受其他设置影响？）
• 拖动滚动条（受各种因素影响）

然后，根据浏览器的不同，所有这些都可能表现出不同的行为

简言之？将动画与滚动事件的数量联系起来对我来说是个坏主意。相反，为什么不将其绑定到滚动位置

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

---

这是正在运行的演示，您可以看到马的动画

onload=函数startAnimation（）{
var frames=document.getElementById（“动画”）.children；
var frameCount=frames.length；
var i=0；
setInterval（函数（）{
帧[i%frameCount].style.display=“无”；
帧[++i%frameCount].style.display=“block”；
}, 100);
}

#动画img{
显示：无；
}
#动画img：第一个孩子{
显示：块；
}

---

这是正在运行的演示，您可以看到马的动画

onload=函数startAnimation（）{
var frames=document.getElementById（“动画”）.children；
var frameCount=frames.length；
var i=0；
setInterval（函数（）{
帧[i%frameCount].style.display=“无”；
帧[++i%frameCount].style.display=“block”；
}, 100);
}

#动画img{
显示：无；
}
#动画img：第一个孩子{
显示：块；
}

403禁止在您的imgur参考资料中使用…@landons Woops，对不起！我不知道那里发生了什么。更新了链接，现在应该可以了。@landons奇怪。我换了主持人，希望现在可以了。如果教程中的代码有效，而你的代码无效，那么它们之间显然有些不同。向我们展示其中一个实用教程将大大有助于我们准确理解您想要做的事情，这将使练习变成一个简单的“发现差异”而不是更广泛的“发现问题”。@Snixtor好的，我明白了，我添加了一个示例。403禁止在您的imgur参考中使用…@landons Woops，对不起！我不知道那里发生了什么。更新了链接，现在应该可以了。@landons奇怪。我换了主持人，希望现在可以了。如果教程中的代码有效，而你的代码无效，那么它们之间显然有些不同。向我们展示一个有效的教程将大大有助于我们准确地理解您想要做的事情，这将使练习变成一个简单的“发现差异”而不是更广泛的“发现问题”。@Snixtor好的，我知道了，我添加了一个示例。是的，我遇到了不一致的地方，它们让我发疯了哈！所以我明白为什么你的代码更好了，谢谢！我甚至不知道你可以在函数定义之前调用它