與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

回答

相關問題