Question

在使用MathJax的数学公式的html页面中，我试图在从一个公式到另一个公式的变化中进行平滑过渡。

以下是您可以test here

的当前代码

<!DOCTYPE html>
<html>
<head>
<!-- https://jsfiddle.net/LnfL020r/2 -->
<title>math guided training</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: {
    Macros: {
      mgtMult: "",
      mgtSelect: [ "\\bbox[10px,border:1px solid red]{#1}", 1],
    }
  }
});    
</script>

<script type="text/javascript" 
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>


<style> 

    .results {
    display: flex;
        height: 4cm;
    position: relative;
    }


#fadeBox,
#visibleBox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0;
}

</style>    
</head>
<body>

<script>
    var QUEUE = MathJax.Hub.queue;  // shorthand for the queue
    var math = null;   // the jax element 
    var box = null;    // the box math is in
    var formula = "1+2x^3";

    var SHOWBOX = function () {
    var a = $('#box').html();
    var dstDiv = $('#visibleBox');
        dstDiv.html(a);
    }

    var SHOWBOX_FADE = function () {
    var a = $('#box').html();
    var dstDiv = $('#visibleBox');
    var fadeDiv = $('#fadeBox');

    fadeDiv.html(a);
    fadeDiv.fadeIn(2000,function() {
           dstDiv.html(a);
       fadeDiv.hide();
        });
    }

    var REFRESH = function () {  
    QUEUE.Push(
          ["Text",math,formula], // == math.Text(formula), [ method, object, args... ]
          SHOWBOX
        );
    }

    var REFRESH_FADE = function () {  
    QUEUE.Push(
          ["Text",math,formula], // [ method, object, args... ]
          SHOWBOX_FADE
        );
    }

    //  Get the element jax when MathJax has produced it.
        QUEUE.Push(
          function () {
        math = MathJax.Hub.getAllJax("box")[0]; // returns a MathJax.ElementJax
        math.Text(formula);
            SHOWBOX();
          }
        );

   setTimeout(function(){
     SHOWBOX();
   }, 2000);

    window.changeIt = function() {
      formula = "1 + 2 { \\left( y + 4 \\right) } ^ 3 ";
      REFRESH_FADE();
    }

</script>

</head>
<body>

        <div id="box" style="visibility:hidden; font-size: 500%; height:1px;"> 
        \( \)
        </div>

        <div class="results">

            <div id="visibleBox" style="font-size: 500%;">
        Loading ...
            </div>

            <div id="fadeBox" style="font-size: 500%; display:none;">
            </div>

        </div>

        <button onclick='changeIt()'/>click me</button>

</body>
</html>

问题是：

由于括号，第二个公式的高度与第一个公式的高度不同。出于这个原因，共同部分＆＃34; 1 +＆＃34;相对于其在第一个配方中的印刷品，第二个印刷品略微印刷。

在过渡期间产生借贷效应。我希望＆＃34; 1 +＆＃34;这两个公式共有的部分，从第一个变为第二个时不会移动。

任何提示？

Answer 1

fadeIn和fadeOut几乎没有变化

fadeDiv.html(a);
dstDiv.fadeOut(1000,function() {
       dstDiv.html(a);
   fadeDiv.fadeIn(1000);
    });
}

Forked fiddle 如果过渡不符合预期，请发表评论

修改更新了要求

Fiddle link

window.onload=function(){ var QUEUE = MathJax.Hub.queue; // shorthand for the queue var math = null; // the jax element var mathdef = null; // the jax element var box = null; // the box math is in var defaultformula = "1+"; var formula = "2x^2"; var SHOWBOX = function () { var a = $('#box').html(); var def = $('#defbox').html(); var fixedDiv = $('#fixed'); fixedDiv.html(def); var dstDiv = $('#visibleBox'); dstDiv.html(a); } var SHOWBOX_FADE = function () { var a = $('#box').html(); var dstDiv = $('#visibleBox'); var fadeDiv = $('#fadeBox'); fadeDiv.html(a); dstDiv.fadeOut(1000,function() { dstDiv.html(a); fadeDiv.fadeIn(1000); }); } var REFRESH = function () { QUEUE.Push( ["Text",math,formula], // == math.Text(formula), [ method, object, args... ] SHOWBOX ); QUEUE.Push( ["Text",mathdef,defaultformula], // == math.Text(formula), [ method, object, args... ] SHOWBOX ); } var REFRESH_FADE = function () { QUEUE.Push( ["Text",math,formula], // [ method, object, args... ] SHOWBOX_FADE ); } // Get the element jax when MathJax has produced it. QUEUE.Push( function () { math = MathJax.Hub.getAllJax("box")[0]; // returns a MathJax.ElementJax mathdef = MathJax.Hub.getAllJax("defbox")[0]; // returns a MathJax.ElementJax mathdef.Text(defaultformula); math.Text(formula); SHOWBOX(); } ); setTimeout(function(){ SHOWBOX(); }, 2000); window.changeIt = function() { formula = "2 { \\left( y + 4 \\right) } ^ 2"; REFRESH_FADE(); } }//]]>

.results { display: flex; height: 4cm; position: relative; } #fadeBox, #visibleBox { width: 100%; height: 100%; position: absolute; top: 0%; left: 0; }

<!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { Macros: { mgtMult: "", mgtSelect: [ "\\bbox[10px,border:1px solid red]{#1}", 1], }, Macros: { mgtMult: "", mgtSelect: [ "\\bdefbox[10px,border:1px solid red]{#1}", 1], } } }); </script> <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> <div id="defbox" style="visibility:hidden; font-size: 500%; height:1px;padding-top:10px">  </div> <div id="box" style="visibility:hidden; font-size: 500%; height:1px;padding-left:200px">  </div> <div class="results"> <div id="fixed" style="font-size: 500%;margin-top:50x"> Loading ... </div> <div id="visibleBox" style="font-size: 500%;padding-left:100px"> </div> <div id="fadeBox" style="font-size: 500%; display:none;padding-left:100px"> </div> </div> <button onclick='changeIt()'>click me</button> </body> </html>

Answer 2

也许这会奏效：

options = GLib.Variant('a{sv}', {
    'draw-cursor': GLib.Variant('b', False),
    'framerate': GLib.Variant('i', 30),
})

仅应用保证金来抵消上边距的轻微差异

mathjax与jquery fadein

2 个答案: