引数無しでこれらを呼び出した場合、瞬間的に選択されている要素を表示・非表示にします。
<div id="box1" style="width: 100px; height: 100px; background-color: orange"></div> <form> <input type="button" id="btn_show" value=".show()"> <input type="button" id="btn_hide" value=".hide()"> </form>
$("#btn_show").on("click", function () { $("#box1").show(); }); $("#btn_hide").on("click", function () { $("#box1").hide(); });
durationに、数値でミリ秒単位を指定することで、アニメーションが切り替わるまでの時間を設定できます。
<div id="box2" style="width: 100px; height: 100px; background-color: orange"></div> <form> <input type="button" id="btn_show2" value=".show()"> <input type="button" id="btn_hide2" value=".hide()"> </form>
$("#btn_show2").on("click", function () { $("#box2").show(1000); }); $("#btn_hide2").on("click", function () { $("#box2").hide("fast"); });