slidedown zum ersten Mal nicht

Question

Ich füge Animation eine versteckte div zu zeigen, arbeiten, wenn eine Checkbox geändert wird,

Das erste Mal ist es die div ohne Animation angezeigt wird geklickt, aber es funktioniert in beiden Richtungen nach dem ersten Zeit.

Wie kann ich es auch beim ersten Mal arbeiten lassen?

Hier ist meine div (auch mit Bootstrap)

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: dieses Problem durch Hinzufügen Display gelöst: none; Zum div

Beim Hinzufügen der Bootstrap-Klasse .Hidden, um aus irgendeinem Grund zu verbergen, fügt es nicht die Anzeige: keine; das ist Teil der .hidden Klasse im Bootstrap ... nicht sicher warum, aber Hinzufügen der Stilanzeige: none; oder das Aufrufen von postOptionsSourcesWrapper.hide() behebt dieses Problem.

Answer 1

Dieser Code wird erreichen, was Sie erreichen möchten. Sie müssen nur Ihr Skript mit diesem ersetzen.

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

postOptionsSourcesWrapper.hide(); 

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