slideDownが初めて

Question

のために動作しないチェックボックスが変更されたとき、私は隠されたdiv要素を表示するためにアニメーションを追加している、

それはdiv要素をクリックします初めてなしアニメーションで表示されますが、それは最初の後に両方の方法を動作します時間。

どのようにして最初に動作させることができますか？この問題は、ディスプレイを添加しないことによって解決される：ここで

は私のdiv（もブートストラップを使用して）

var postOptionsSourcesWrapper = $("#post-options-sources-wrapper"); 
 
    var postOptionsExclusiveCheckbox = $("#post-exclusive-cb"); 
 
    postOptionsExclusiveCheckbox.change(function() { 
 
     if ($(this).is(":checked")) { 
 
     postOptionsSourcesWrapper.slideUp(300, "easeOutCirc", function() { 
 
      postOptionsSourcesWrapper.addClass("hidden"); 
 
     }); 
 
     } else { 
 
     postOptionsSourcesWrapper.removeClass("hidden"); 
 
     postOptionsSourcesWrapper.slideDown(300, "easeOutCirc"); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="post-options-sources-wrapper" class="margin-b-5 hidden"> 
 
    <label class="text-md thick-600">Original post references</label> 
 
    <div class="box-marker box-marker-white"> 
 
    <div class="thick-600 color-gray text-sm text-uppercase"> 
 
     Add one or multiple sources. 
 
    </div> 
 
    </div> 
 
</div>

UPDATEでどれを。

何かの理由で非表示にするためのブートストラップクラス.hiddenを追加すると、表示が追加されません。それはブートストラップの.hiddenクラスの一部です...なぜ、なぜスタイルが追加されているのかわかりません。 postOptionsSourcesWrapper.hide（）を呼び出すとこの問題が解決されます。

Answer 1

このコードは、達成したいことを達成します。 スクリプトをこのスクリプトに置き換えるだけで済みます。

var postOptionsSourcesWrapper = $("#post-options-sources-wrapper"); 
var postOptionsExclusiveCheckbox = $("#post-exclusive-cb"); 

postOptionsSourcesWrapper.hide(); 

postOptionsExclusiveCheckbox.change(function() { 
    postOptionsSourcesWrapper.slideToggle(300,postOptionsSourcesWrapper.is(":checked")); 
});