循环内速度增加（使用延迟）的 FadeIn 元素

Question

我正在尝试找到一个可以让我以更快的速度淡入元素的公式。

问题：目前淡入速度上升得太快了，我尽量不让这种非常快的淡入发生，直到大约一半的时候（这几乎总是低于首屏时一个用户正在查看页面）

例如，前几个元素大约需要半秒或更长时间淡入，并且从那里变得越来越快。目前集合中大约有 39 件物品，尽管可能 grow/shrink 为 30 到 60 件。总事件持续时间应约为 3-4 秒。

这是我的尝试（在 jQuery 每个循环中）：

i 是项目的索引（例如 1 out of 39，2 out of 39，等等）

$("div").css("display","none"); //ONLY FOR DEMO
$("div").each(function(i) {
  i = i+1;
  var currRate = Math.pow(i, 1.2) * 100;
  var delayNum = Math.floor(currRate / i * 15) + 200;
  var fadeNum = 400;
  
  if (i < 5) {delayNum = 450 * i;} //Shameful hack
  
  $(this).delay(delayNum).fadeIn(fadeNum);
});

div {display:inline-block; width:20px; height:20px; margin: 2px; background:red;} /*ONLY FOR DEMO*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

codepen: https://codepen.io/anon/pen/yKvevw

我曾想过可能将整个事件在所有项目中褪色的总持续时间设置为一个常量。我也在研究一些指数增长公式，看看我是否能弄清楚我在这里遗漏了什么。

Answer 1

这花了一些时间，但我想我找到了一些可行的方法：

$("div").css("display","none"); //ONLY FOR DEMO
$("div").each(function(i) {
  var startdelay=0, basedelay=600, speed=3, accel=0.33, power=1/3, i=i+1, n=$("div").length, delay=basedelay*n/(speed+(speed*(accel*i/n)));
  delay = startdelay + Math.floor(delay*Math.pow(i/n,power)) - Math.floor(delay*Math.pow(1/n,power));
  $(this).delay(delay).fadeIn(400);
});

div {display:inline-block; width:20px; height:20px; background:red;} /*ONLY FOR DEMO*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

codepen: https://codepen.io/anon/pen/PRyJLG

我发现这个网站在找出确切的公式时很有帮助：
https://www.mathopenref.com/graphfunctions.html

以下是我以前的尝试之一，我对它不满意，但有人可能更喜欢这个而不是我的最终解决方案：

$("div").css("display","none"); //ONLY FOR DEMO
$("div").each(function(i) {
  var maxdelay=600, mindelay=0, i=i+1, n=$("div").length, delay=mindelay;
  for (var j=1; j<=i; ++j) {delay += Math.floor((maxdelay-mindelay) * (1-Math.pow(j/n,3)));}
  $(this).delay(delay).fadeIn(400);
});

div {display:inline-block; width:20px; height:20px; background:red;} /*ONLY FOR DEMO*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

代码笔：https://codepen.io/anon/pen/JLLmrb

循环内速度增加（使用延迟）的 FadeIn 元素

FadeIn elements with increasing speed (using a delay) inside a loop

javascript

math

jquery

delay

fadein