見本ツール:分量変えるくん1号

「分数 → 少数のヒント」をクリックすると、ふきだしがふわっと表示されるようになっています。
また、もう一度クリックするとふわっと消えます。
HTML のコード
<div class="hint-wrap">
<div id="hint" class="hint">
<p><i class="far fa-question-circle"></i> 分数 → 小数のヒント</p>
</div>
<div class="hint-box">
<!-- ヒントの内容 -->
<div id="balloon" class="balloon hide">
<div class="balloon2-top">
<div class="hint-left">
<p><span>1/2</span> = 0.5</p>
<p><span>1/4</span> = 0.25</p>
<p><span>1/8</span> = 0.125</p>
</div>
<div class="hint-right">
<p><span>1/3</span> = 0.333</p>
<p><span>2/3</span> = 0.666</p>
<p><span>3/4</span> = 0.75</p>
</div>
</div>
</div>
</div>
</div>
jQuery のコード
// 分数のヒントをクリックでオンオフ
$('#hint').click(function() {
$('#balloon').fadeToggle(200);
});
あれこれ調べたんですが、.fadeToggle()
を使うのが一番簡単そうでした。
() の中の数値でアニメーションの速度を変更できます。
コメントを残す