好的，所以首先您可能需要某种比例来确定要淡入多少行。为什么需要这个比例？如果用户只向下滚动一英寸，您不想淡入 6 英寸的内容。
我想在这里做一个说明，并指出在你的最终实现中，比例不是你想要使用的。尽管这是一种考虑解决方案的简单方法，但实际上您将希望淡入与您的页面位置和内容大小相关的大量内容。此外，您将希望内容淡入，即使访问者看不到整行（如果需要，我可以稍后帮助您）。
出于我们的目的，假设每行的高度为 20px，行之间没有空格，我们的比率是每滚动 20px 1 行淡入（请注意，使用此比率，您的内容不会淡入直到您将其完全滚动到视图中）。
下一步是设计一种方法来跟踪您滚动了多少。为简单起见，我们只使用一个变量来保存当前窗口位置（此变量将在每滚动 20px 后更新）：
var current = $(window).scrollTop(); //sets the initial value
接下来，您将想要创建一种方法来跟踪您已淡入的行数。有很多方法可以做到这一点（有些比我将要使用的更好），但我将使用为了简单起见，变量。
var rowsShown = 0;
接下来，您需要编写滚动事件处理程序来调用您的代码以确定您是否应该，如果是，则淡入您的行：
$(window).scroll(function () {
...code to determine if you should and actually fade in rows...
});
现在您需要编写条件来确定是否应该淡入任何行。您首先编写另一个变量来确定新窗口位置，并将其与之前的位置进行比较，存储在current 中。请记住，我们的比例是每行 20px，因此窗口必须滚动至少 20px 才能淡入另一行：
var newPosition = $(window).scrollTop();
if ((newPosition - current) >= 20) {
...fade in rows...
current += 20; //update current
}
我想指出，为了我们在这个简单的“教程”中的目的，您需要将 current 设置为比以前多 20，而不是将其更新到新的当前位置 (newPosition ）。你为什么问？因为鼠标并不总是一次滚动一个像素（事实上，它们几乎从不这样做），所以我们保持简单，每行淡入 20px，我们希望通过保持当前为 20 的倍数来保持该比例。但是，当需要编写最终版本时，您可能希望将其更改为 current = newPosition;。
接下来，您必须编写淡入代码：
$(rowsToFadeIn).eq(rowsShown).fadeIn(speed, function () {
rowsShown += 1; //increment the accumulator
...do any other call back stuff here...
});
最后，您需要编写一个类似的方法来向上滚动和淡出您的内容（否则，如果您向上滚动并再次开始向下滚动，您将不会看到您的内容淡出它 - 它会在您前面淡出）。
请注意，这不是完整的实现 - 这只是为了让您入门。并得到一些东西供您测试和玩耍。一旦你让它工作，我会修改脚本的效果部分以使用.promise().done() 以确定之前的效果何时完成。如果您对使用 .promise().done() 感到不舒服，那么我会执行以下操作：
- 创建一个变量
var fading = 0 来保存您当前正在淡出的元素数量。
-
每次您要开始淡化一个元素时，您将执行以下操作：
- 给
fading加一
-
通过类似这样的调用来调用你的效果：
$(rowsToFade).eq(rowsShown).delay((fading - 1) * speed).fadeIn(.....
- 延迟
(fading - 1) * speed 等待所有当前正在运行的渐变（不包括您将要运行的渐变）
- 在您的
.fadeIn() 方法的回调中，从衰落(fading -= 1;) 中减一，以防止不必要的延迟。
如果我是你，我会尽量避免使用计时器。他们有相当多的开销，而且他们永远不会完全按照您的意愿行事。另外，使用淡入淡出之类的东西往往会产生断断续续的效果，尤其是在速度较慢的浏览器中，偶尔在 Chrome 等较快的浏览器中。
如果您对此有任何疑问，请告诉我。我很乐意提供帮助。祝你好运！ :)
编辑：我差点忘了，如果您的元素是正常流程的一部分，您将不得不将 body 或包装元素的高度设置为 display: none（这是 @ 所必需的） 987654340@ 和 fadeOut) 会将它们从流程中删除，并将您的页面缩短到没有它们时的高度。这可能会导致您甚至没有滚动条。
编辑 2：还请注意，您可以（并且如果您使用它应该）使用 .delay() 改进建议的更新实现，因为您无疑会遇到不必要的延迟。如果你不喜欢 A 计划（.promise().done()) ;)
但是，如果您是 jQuery 新手，那么您可能会从改进 B 中学到比使用 A 更多的东西。