断断续续的动画引导程序答案

【问题标题】：Choppy animation bootstrap断断续续的动画引导程序
【发布时间】：2015-07-23 11:56:21
【问题描述】：

我在一些 html 元素上使用引导折叠类。然后，使用 jquery，我动态显示折叠的元素。一个例子：(html:)

<form>
    <div class="checkbox">
        <label><input type="checkbox" id="1">checkbox1</label>
    </div>
    <div class="sub_level collapse">
        <div class="checkbox">
            <label><input type="checkbox" id="2">checkbox2</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" id="3">checkbox3</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" id="4">checkbox4</label>
        </div>
    </div>
</form>

(javascript:)

$(document).ready(function(){

    $("#1").click(function(){
        $("div.sub_level").collapse("toggle");
    });

});

这里是 jsfiddle：https://jsfiddle.net/DTcHh/10346/

阅读有关此问题的信息后，我了解到这是导致此问题的填充。删除填充修复它，但我不想删除填充。此外，将折叠元素包装在 div 中有时可以解决问题，但有时不能。我想知道这个问题是否有核心原因，以便我可以解决。我尝试使用 jquery show/hide 并使用 style='display:none;' 而不是引导折叠类，但这是同样的问题。这么简单的动画方法我不能用，好像不太合逻辑。

谢谢。

【问题讨论】：

标签： javascript twitter-bootstrap animation jquery-animate

【解决方案1】：

以下是使用 jQuery 的方法，因此您不依赖于 Bootstrap collapse。

$('#checkChange').click(function() {
  this.checked ? $('#opened').fadeIn(300) : $('#opened').fadeOut(100);
});

.wrapper {
  padding: 25px 0;
}
#opened {
  display: none;
  background: #f5f5f5;
  padding: 10px 15px;
  margin: 10px 0px;
}
#checkIt .form-control {
  border-radius: 0px;
  height: 50px;
}
input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
}
input[type=checkbox]:checked + label {
  color: #000;
  font-style: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container">
    <div class="row">
      <form name="checkIt" id="checkIt">
        <div class="col-sm-6">
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control" id="email" placeholder="Email" />
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Password" />
          </div>
        </div>
        <div class="col-sm-6">
          <input type="checkbox" id="checkChange" />
          <label for="checkChange">Check It Out</label>
          <div id="opened">
            <div class="checkbox">
              <label>
                <input type="checkbox" id="one" />Check It</label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" id="two" />Check It Out</label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" id="three" />Check It Out Again</label>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Name" />
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

【讨论】：