javascript - 循环内速度增加(使用延迟)的 FadeIn 元素

Question

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

问题:目前淡入速度上升得太快，我正在尝试直到大约一半时才出现这种非常快的淡入(当用户正在观看时，这几乎总是低于首屏)页面)

例如，前几个元素需要大约半秒或更长时间才能淡入，并且从那里变得越来越快。目前集合中大约有 39 件元素，但可能会增加/减少到 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>

代码笔: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>

代码笔: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