与jquery fadein的mathjax

在使用MathJax的数学公式的html页面中，我试图从一个公式到另一个公式的变化平稳过渡。与jquery fadein的mathjax

这里是当前的代码，就可以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>

的问题是：

第二公式具有不同的高度比第一个，由于括号。由于这个原因，第二个公共部分“1+”在第一个公式中相对于其打印件稍微向下打印。

在转换过程中会产生借位效应。我希望两个公式共有的“1 +”部分在从第一个变为第二个时不会移动。

任何提示？

来源

2017-02-05 pasaba por aqui

注：cdn.mathjax.org接近其请查看https://www.mathjax.org/cdn-shutting-down/获取迁移提示。 –

在制造和淡入淡出

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 
 
\t var mathdef = null; // the jax element 
 
    var box = null; // the box math is in 
 
\t var defaultformula = "1+"; 
 
    var formula = "2x^2"; 
 

 
    var SHOWBOX = function() { 
 
\t var a = $('#box').html(); 
 
\t var def = $('#defbox').html(); 
 
\t var fixedDiv = $('#fixed'); 
 
\t \t fixedDiv.html(def); 
 
\t var dstDiv = $('#visibleBox'); 
 
     dstDiv.html(a); 
 
    } 
 

 

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

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

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

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

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

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

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

 

 
}//]]>

.results { 
 
\t display: flex; 
 
\t \t height: 4cm; 
 
\t 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], 
 
    }, 
 
\t 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"> 
 
\t \t \(\) 
 
     </div> 
 

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

 
     <div class="results"> 
 
\t \t \t 
 
\t \t \t <div id="fixed" style="font-size: 500%;margin-top:50x"> 
 
\t \t \t \t Loading ... 
 
      </div> 
 
      <div id="visibleBox" style="font-size: 500%;padding-left:100px"> 
 
\t \t 
 
      </div> 
 

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

 
     </div> 
 

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

 

 
    
 

 
</body> 
 

 
</html>

来源

2017-02-05 17:29:38

是一个有趣的选项，但它完全隐藏了第二个打印之前的第一个公式。目标是“1+”永不移动也不会消失。 –

我对mathjax一无所知。因此，我建议在固定的div或容器中呈现“1+”，并保留在另一个div或容器中。那么你将这个逻辑应用于第二个容器。我希望这将缓解需求 –

@pasabaporaqui根据需求更新代码 –

也许这将工作：

var SHOWBOX = function() { 
     var a = $('#box').html(); 
     var dstDiv = $('#visibleBox'); 
     // apply margin for the first equation 
     dstDiv.css({"margin-top":"2px"}); 
     dstDiv.html(a); 
} 


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

    fadeDiv.html(a).fadeOut(); 
    fadeDiv.fadeIn(500,function() { 
     dstDiv.html(a); 
     // remove the margin for the second equation 
     dstDiv.css({"margin-top":"0"}); 
      fadeDiv.hide(); 
    }); 
}

只是将保证金从未来对抗轻微变化在上边距

来源

2017-02-05 17:47:16

是的，在这种情况下，效果正如预期的那样。但是，在我的电脑中，我需要将边距从“2px”修改为“10px”。问题是如何将此解决方案推广到任何一对公式和任何客户端计算机配置。在真实情况下，公式是由Java程序生成的。 –

与jquery fadein的mathjax

回答

相关问题