Question

我添加动画以在更改复选框时显示隐藏的div

第一次单击时，div显示没有动画，但在第一次之后它会同时工作。

我怎样才能让它第一次运作？

这是我的div（也使用bootstrap）

＆＃13;

    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");
      }
    });

＆＃13;

<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>

＆＃13;

更新：此问题通过添加display：none解决;到div

当添加bootstrap类.hidden因为某些原因而隐藏时，它不会添加display：none;这是bootstrap中.hidden类的一部分...不确定原因，但添加样式display：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"));
});

slideDown第一次不起作用

1 个答案: