Question

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

当元素淡出时，下面的元素向上移动一个位置。如何让元素保持原样？
在美学上它有点难看。如果有人能引导我使用资源，使它更优雅，那将是伟大的。如果你有想法让它更漂亮使用JS请尝试一下！

＆＃13;

$('#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);

＆＃13;

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

＆＃13;

Answer 1

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

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

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

Answer 2

以下是在列表中循环并更新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);

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

Answer 3

我会使用-I和<h2>标记。拥有一组<br>集合作为幻灯片。给每个人<div>课程。在每张幻灯片上放置要显示的方程式。使用slide和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;
}

使用JavaScript为MathJax方程设置动画

3 个答案: