Jquery 用幻灯片向下显示一个div

我有一个要显示和隐藏的div，并带有一个复选框：

      <li>             
        <label for="">Fixed-term package:</label>               
        <ul>                  
          <li><input id="" type="checkbox" name="package-fixed-term" /></li>               
        </ul>                       
      </li>
      <div id="package-fixed-term-options" class="hidden">

当我检查输入控件时，它不会向下滑动。我可以通过将.removeClass（“hidden”）添加到行中来实现它，但这不是必需的（例如，slideUp不需要添加回我的隐藏类），添加remove类也会终止延迟和slideDown动画。这张幻灯片效果很好。以下是函数：

$('input[name="package-fixed-term"]').change(function(){
if ($('input[name="package-fixed-term"]:checked').val() !== undefined) {     
  $('div#package-fixed-term-options').delay(300).slideDown(500);
  return false;
  } else {
  $('div#package-fixed-term-options').delay(300).slideUp(500);
  return false;
  }
});

---

这是

！重要信息

导致此问题的原因

看这把小提琴：

从css中删除它，它将工作：

.hidden {display: none;}​

---

实现这一点的最简单方法是使用“切换”

这是DIV

---

你好，卢波，太好了。我不会怀疑，因为这个问题，我没有设置这些类，所以我应该更加怀疑。切换是简化代码的一个好建议。谢谢还是很好奇为什么！重要的是会弄乱动画。除了删除！重要提示：如果样式是内嵌的，则可以在函数中重写它：.css（'display'，'block！important'）我在[documentation for.show（）][1][1]中找到了这方面的线索：

.hidden {display: none;}​

<input type="checkbox" onchange="$('#myDiv').toggle();" />
<div id="myDiv" style="display: block">
Here goes the DIV
</div>