slideDown не работает в первый раз

Question

Я добавление анимации, чтобы показать скрытые 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: эта проблема решается путем добавления дисплея: нет; на div

При добавлении класса начальной загрузки .hidden, чтобы скрыть по какой-либо причине, он не добавляет отображение: none; это часть класса .hidden в bootstrap ... не уверен, почему, но добавление отображения стиля: none; или вызов 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")); 
});