使用jQuery以時間順序顯示畫布中的文本？

小提琴：https://jsfiddle.net/6e6nwkpv/使用jQuery以時間順序顯示畫布中的文本？

我想讓隱藏的畫布顯示，並且當我點擊'否'按鈕時隱藏頁腳。但不知何故，它們最終都消失了。

獎勵：人們如何讓html canvas上的java單詞以時間順序出現（並消失）？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 

<body> 
    <div id="canvas" style="display: block;"> 
     <canvas id="myCanvas" height="300" width="500"></canvas> 
    </div> 
    <div id="buttons"> 
     <button class="clickBoo" style="margin-top: 40px;">No</button> 
    </div> 
    <footer class="change"> 
     Revised June 7th 
    </footer> 
</body> 

$(document).ready(function() { 

    $(function() { 
     var canvas = document.getElementById("myCanvas"); 
     if (canvas.getContext) { 
      var ctx = canvas.getContext("2d"); 
      ctx.font="30px Helvetica"; 
      ctx.fillStyle = "white"; 
      ctx.fillText ('Boo!',400,50); 
      ctx.fillText ('Boo!',10,200); 
      ctx.fillText ('Tea?',300,200); 
      ctx.fillText ('No?',200,400); 
      ctx.fillText ('Sorry if I scared you.',20,40); 
     } 
    }); 

    $(".clickBoo").click(function() { 
     $(".change").toggle("changed"); 
     $("#myCanvas").toggle("show"); 
    }); 

});

來源

2015-06-06 seasons986

我不確定你想用腳註做什麼，但我認爲你需要使用toggleClass（'changed'） – Jackson

這個代碼有幾個問題。

作爲@Jackson建議，你用錯了jQuery的功能toggle()而不是toggleClass()。
其次，您的頁腳的margin-top屬性設置爲-700px，導致此元素消失，因爲您的畫布和摘要中的「No」按鈕的高度大約爲400像素。所以你的頁腳在屏幕上方顯示大約300px。
默認情況下，您的畫布顯示爲，但顯示爲空白內容。因此，將show類應用於您的畫布不會執行任何操作。

來源

2015-06-06 09:47:41 kukis

不切換到Google！ – Jackson

謝謝，更正 – kukis

謝謝！所以，我根據你和@Jackson所說的改變了，沒有隱藏CSS，它顯示爲一個紅色框，但是我怎樣才能讓它變成可見的，而不是反過來呢？ – seasons986

使用jQuery以時間順序顯示畫布中的文本？

回答

相關問題