jquery - jqueryトグルのデフォルト効果を変更する方法..？

Question

jQueryを学習しようとしていますが、1つの問題が見つかりました。divを表示および非表示にすることができるトグル効果があります。コードは以下のとおりです。

<script type="text/javascript">
    $(document).ready(function(){
        $("#butShowHideSlow").click(function () {
            $("#divShowHideSlow").toggle("slow");
        });
    });
</script>

<button id="butShowHideSlow">Click Me</button>
<div style="width: 300px; height: 47px; border: solid 1px black; background-color: white; text-align: center;" id="divShowHideSlow">Div that hide and show slowly</div>

最初divはそこにいますが、最初はdivを非表示にします。簡単だと思いますが、jQueryは初めてなので、どうすればよいか教えてもらえますか？

ご協力ありがとうございました。

Answer 1

最初のトグルをに変更しますhide()

<script type="text/javascript">
 $(document).ready(function(){
  $("#divShowHideSlow").hide();
  $("#butShowHideSlow").click(function () {
   $("#divShowHideSlow").toggle("slow");
  });
 });
</script>
<button id="butShowHideSlow">Click Me</button>
<div style="width:300px;height:47px; border: solid 1px black;background-color:white;text-align:center;" id="divShowHideSlow">Div that hide and show slowly</div>

Answer 2

これを試して：

<script type="text/javascript">
$(document).ready(function(){
  $("#butShowHideSlow").click(function () {
    $("#divShowHideSlow").toggle("slow");
  });
});
</script>

<button id="butShowHideSlow">Click Me</button>
<div style="display: none; width:300px;height:47px; border: solid 1px black;background-color:white;text-align:center;" id="divShowHideSlow">Div that hide and show slowly</div>

Answer 3

スクリプトの先頭に次の行を追加できます。

$("#divShowHideSlow").hide(); 

これがJSFiddleです。

http://jsfiddle.net/6TLaw/

Answer 4

$("#divShowHideSlow").hide();

display:noneまたは、divスタイル属性に追加します。