使用 JavaScript 为 MathJax 方程制作动画

Question

我想制作一个无缝的动画，给人一种逐步将变量代入表达式的印象。然而，有一些问题使它变得相当丑陋。

当一个元素淡出时，下面的元素向上移动一个位置。我怎样才能让元素留在原处？
从审美上来说有点丑。如果有人可以指导我获得资源以使其更优雅，那就太好了。另外，如果您有使用 JS 使其更漂亮的想法，请尝试一下！

$('#next').hide();
$('#next2').hide();
$('#next3').hide();
$('#next4').hide();
$('#next5').hide();
$('#next6').hide();
$('#next7').hide();
$('#next8').hide();

$('#next').fadeIn(1000);
$('#start').fadeOut(1000);
$('#next4').fadeIn(3000);
$('#next').fadeOut(1000);
$('#next3').fadeIn(4000);
$('#next5').fadeIn(4000);
$('#next3').fadeOut(1000);
$('#next4').fadeOut(3000);
$('#next6').fadeIn(5000);
$('#next5').fadeOut(3000);
$('#next6').fadeOut(6000);
$('#next7').fadeIn(13000);
$('#next7').fadeOut(1000);
$('#next8').fadeIn(15000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_CHTML"></script>
<div id="equation">
  <h2 id="start">`KE_{rot} = \frac1 2 I \omega^2`</h2>
  <br>
  <h2 id="next">`\omega =sqrt(2\alpha \Delta degrees)`</h2>
  <br>
  <h2 id="next2">`KE_{rot} = \frac1 2 I sqrt(2\alpha \Delta degrees)`</h2>
  <br>
  <h2 id="next3">`\alpha = frac\{tau_{max}} {I}`</h2>
  <br>
  <h2 id="next4">`KE_{rot} = \frac1 2 I \sqrt{(2 (\frac{\tau_{max}} {I})   \Delta degrees)}^2`</h2>
  <br>
  <h2 id="next5">`KE_{rot} = \frac1 2 I \(2 (\frac{\tau_{max}} {I}) \Delta degrees)`</h2>
  <br>
  <h2 id="next6">`KE_{rot} = \tau_{max}\Delta degrees`</h2>
  <br>
  <h2 id="next7">`\tau_{max} = I \alpha`</h2>
  <br>
  <h2 id="next8">`KE_{rot} = I \ \alpha \  \Delta   degrees`</h2>
</div>

Answer 1

jQuery hide() 将显示属性更改为 'none'。 fadeOut 完成时做同样的事情。这会导致元素从布局中完全移除，导致下一个元素向上移动。

您可以采用多种方法来解决此问题。一种方法是直接设置不透明度属性的动画，而不是使用 fadeOut 快捷方式。例如，.animate({opacity: 0})。

另一种可能的处理方式，可能更美观，是创建一个包装器 div 一个等式的高度，然后将等式插入 div 和 overflow: hidden 并为滚动位置设置动画以依次显示每个方程式。（在这种情况下，您可能希望将每个等式 div 的高度设置为相等。）

Answer 2

下面是一个循环遍历列表并就地更新 html 的示例。不确定为什么我的淡入淡出或数学东西在 fiddle 中不起作用，但这应该是一个好的开始。

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

https://jsfiddle.net/adjavaherian/6yg28as4/

Answer 3

我会放弃使用 <h2> 和 <br> 标签。收集一组 <div> 套作为幻灯片。给每个人 slide class。将您要显示的方程式放在每张幻灯片上。使用 Array.prototype.reduce 和 Promise 做一些花哨的东西以在幻灯片之间切换。

$(function() {
  // I have no idea why jQuery doesn't have a reduce function
  $.fn.reduce = Array.prototype.reduce;

  // Create a chain of promises
  function waterfall(arr, action) {
    arr.reduce(function(prev, next) {
      return prev.then(function() {
        return action(next);
      });
    }, Promise.resolve());
  }

  // Function to actual fade an element in/out and return a promise
  function fader(el) {
    return new Promise(function(resolve, reject) {
      $(el).fadeIn(2000).promise().done(function() {
        this.fadeOut(1000).promise().done(function() {
          resolve();
        });
      });
    });
  }

  // Bootstrap
  waterfall($(".slide"), fader);
});

.math-set {
  text-align: center;
}
.slide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=AM_CHTML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="math-set">
  <div class="slide">
    <div>`KE_{rot} = \frac1 2 I \omega^2`</div>
  </div>
  <div class="slide">
    <div>`\omega =sqrt(2\alpha \Delta degrees)`</div>
    <div>`KE_{rot} = \frac1 2 I sqrt(2\alpha \Delta degrees)`</div>
  </div>
  <div class="slide">
    <div>`\alpha = frac\{tau_{max}} {I}`</div>
  </div>
  <div class="slide">
    <div>`KE_{rot} = \frac1 2 I \sqrt{(2 (\frac{\tau_{max}} {I}) \Delta degrees)}^2`</div>
    <div>`KE_{rot} = \frac1 2 I \(2 (\frac{\tau_{max}} {I}) \Delta degrees)`</div>
  </div>
  <div class="slide">
    <div>`KE_{rot} = \tau_{max}\Delta degrees`</div>
  </div>
  <div class="slide">
    <div>`\tau_{max} = I \alpha`</div>
    <div>`KE_{rot} = I \ \alpha \ \Delta degrees`</div>
  </div>
</div>

使用 JavaScript 为 MathJax 方程制作动画

Using JavaScript to animate MathJax equation

html

javascript

jquery

mathjax