使用JavaScript制作MathJax方程动画

我想执行一个无缝的动画，它给人的印象是一步一步地将变量替换到表达式中。然而，有一些问题使它相当丑陋

当一个元素消失时，下面的元素向上移动一个位置。我怎样才能让元素保持在原来的位置

从美学角度看，这有点难看。如果有人能引导我找到资源，让它更优雅，那就太好了。此外，如果你有一个想法，使它更漂亮使用JS请给它一个尝试

$（'#next'）.hide（）；
$（'#next2'）.hide（）；
$（'#next3'）.hide（）；
$（'#next4'）.hide（）；
$（'#next5'）.hide（）；
$（'#next6'）.hide（）；
$（'#next7'）.hide（）；
$（'#next8'）.hide（）；
$（'下一个'）.fadeIn（1000）；
$（“#开始”）.fadeOut（1000）；
美元("next4")；
$（#next'）。淡出（1000）；
美元("next3")；
美元("next5")；
$（#next3'）。淡出（1000）；
$（#next4'）。淡出（3000）；
美元("next6")；
$（#next5'）。淡出（3000）；
$（#next6'）。淡出（6000）；
美元("next7").法代因(13000);；
$（#next7'）。淡出（1000）；
美元("next8")

`KE_{rot}=\frac1 2 I\omega^2`


`\ω=sqrt（2度\α度\δ度）`


`KE_{rot}=\frac1 2 I sqrt（2\alpha\Delta度）`


`\alpha=frac\{tau{max}}{I}`


`KE_{rot}=\frac12 I\sqrt{（2（\frac{\tau{max}}{I}）\Delta度）}^2`


`KE_{rot}=\frac12 I\（2（\frac{\tau{max}}{I}）\Delta度）`


`KE_{rot}=\tau_{max}\Delta度`


`\tau_{max}=I\alpha`


`KE{rot}=I\\alpha\\Delta度`
jQuery
hide（）
将显示属性更改为“无”。
fadeOut
完成时也会执行相同的操作。这将导致该元素从布局中完全移除，从而导致下一个元素向上移动

有几种方法可以解决这个问题。一种方法是直接设置不透明度属性的动画，而不是使用
fadeOut
快捷方式。例如，
.animate（{opacity:0}）

另一种可能的处理方法（可能更美观）是创建一个方程高度的包装div，然后使用
溢出：隐藏
将方程插入该div，并设置滚动位置的动画以依次显示每个方程。（在这种情况下，您可能希望将每个等式div的高度设置为相等。）
下面是一个循环浏览列表并就地更新html的示例。我不知道为什么我的淡入淡出或数学的东西在小提琴中不起作用，但这应该是一个好的开始

<div id="equation">
  <h2 id="start"></h2>
</div>


var strings = [
    `KE_{rot} = \frac1 2 I \omega^2`,
  `\omega =sqrt(2\alpha \Delta degrees)`,
  `KE_{rot} = \frac1 2 I sqrt(2\alpha \Delta degrees)`,
  `\alpha = frac\{tau_{max}} {I}`,
  `KE_{rot} = \frac1 2 I \sqrt{(2 (\frac{\tau_{max}} {I}) \Delta degrees)}^2`,
  `KE_{rot} = \frac1 2 I \(2 (\frac{\tau_{max}} {I}) \Delta degrees)`,
  `KE_{rot} = \tau_{max}\Delta degrees`,
  `\tau_{max} = I \alpha`,
  `KE_{rot} = I \ \alpha \  \Delta   degrees`
];

var i = 0;

var eq = function(){
    if(i <= strings.length) {
    $('#equation > h2').html(strings[i]);
    i++;  
  } else {
    clearInterval(interval);
  }
}

var interval = setInterval(eq, 1000);


变量字符串=[
`KE_{rot}=\frac12 I\omega^2`，
`\ω=sqrt（2α-δ度）`，
`KE_{rot}=\frac1 2 I sqrt（2\alpha\Delta度）`，
`\alpha=frac\{tau{max}{I}`，
`KE_{rot}=\frac12 I\sqrt{（2（\frac{\tau{max}}{I}）\Delta度）}^2`，
`KE_{rot}=\frac12 I\（2（\frac{\tau{max}}{I}）\Delta度）`，
`KE_{rot}=\tau_{max}\Delta度`，
`\tau_{max}=I\alpha`，
`KE{rot}=I\\alpha\\Delta度`
];
var i=0；
var eq=函数（）{
如果（我我会放弃使用
和

标记。收集一组
集作为幻灯片。为每个集设置
幻灯片类。在每张幻灯片上显示你想要显示的方程式。使用
数组做一些有趣的事情。原型。减少
和
承诺在sl之间转换ides


$（函数（）{
//我不知道为什么jQuery没有reduce函数
$.fn.reduce=Array.prototype.reduce；
//创造一系列承诺
功能瀑布（arr、动作）{
arr.reduce（功能（上一个，下一个）{
返回prev.then（函数（）{
返回操作（下一步）；
});
}，Promise.resolve（））；
}
//函数将元素实际淡入/淡出并返回承诺
功能音量控制器（el）{
返回新承诺（功能（解决、拒绝）{
$（el）.fadeIn（2000）.promise（）.done（函数（））{
this.fadeOut（1000.promise（）.done（function（））{
解决（）；
});
});
});
}
//引导
瀑布（$（“.slide”）、音量控制器；
})；
.math集{
文本对齐：居中；
}
.幻灯片{
显示：无；
}

`KE_{rot}=\frac1 2 I\omega^2`
`\ω=sqrt（2度\α度\δ度）`
`KE_{rot}=\frac1 2 I sqrt（2\alpha\Delta度）`
`\alpha=frac\{tau{max}}{I}`
`KE_{rot}=\frac12 I\sqrt{（2（\frac{\tau{max}}{I}）\Delta度）}^2`
`KE_{rot}=\frac12 I\（2（\frac{\tau{max}}{I}）\Delta度）`
`KE_{rot}=\tau_{max}\Delta度`
`\tau_{max}=I\alpha`
`KE{rot}=I\\alpha\\Delta度`
这些
是否正常？我没有按照动画的流程进行操作。是的，元素正常，但Id不正常。我会解决这个问题的。好的，我改变了顺序。这是一个好主意！它将提供我制作一些辛辣动画所需的灵活性。ThxI真的很喜欢这个显示！不过我必须阅读承诺文档选项。我如何编辑它以在选定的迭代中显示两个？@RyeGuy您的意思是在不同的动画关键帧期间，还是在整个动画中有两个h2？在不同的动画关键帧期间