Question

我试图找到一个能让我以越来越快的速度淡化元素的公式。

问题：目前fadeIn速度上升得太快，我试图不会出现非常快的fadein，直到大约一半的时间（当用户几乎总是低于折叠时）正在查看页面）

同样，前几个元素需要大约半秒或更长时间才能淡入，并且从那里开始变得越来越快。目前该集合中约有39个项目，但可以增长/缩小到30到60.总事件持续时间应该是3-4秒左右。

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

i是该项目的索引（例如39个中的1个，39个中的2个等）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13; codepen：https://codepen.io/anon/pen/yKvevw

我曾考虑将所有项目中整个淡入事件的整体持续时间设置为常量。我也在研究一些指数增长公式，看看我能否弄清楚我在这里缺少的东西。

Answer 1

有些令人费解，但我觉得我找到了一些可行的方法：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13; codepen：https://codepen.io/anon/pen/PRyJLG

我发现这个网站非常有用，同时找出确切的公式：
https://www.mathopenref.com/graphfunctions.html

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13; codepen：https://codepen.io/anon/pen/JLLmrb

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

1 个答案: