jQuery slideUp可以正常工作,slideDown不能正常工作

时间:2018-11-25 17:25:11

标签: jquery slidedown slideup unwrap wrapall

此代码将复选框,标签和br包装在div中,以便可以在动画完成后或应执行的操作中对移除div的动画进行动画处理。

jQuery slideUp可以正常工作,但是slideDown不需要400毫秒。而是以0ms转换。有人可以解释为什么吗?

这里是Fiddle

function showHide(elements, num, action) {
  jQuery.map(elements, function(itm) {
    var element = jQuery('input[type=checkbox][value=\"' + itm + '\"]');
    var toWrap = element.add(element.nextAll().slice(0, num));
    toWrap.wrapAll('<div />');
    switch (action) {
      case 'show':
        element.parent().show(0, function() {
          element.unwrap('div');
        });
        break;
      case 'hide':
        element.parent().hide(0, function() {
          element.unwrap('div');
        });
        break;
      case 'slideDown':
        element.parent().slideDown(400, function() {
          element.unwrap('div');
        });
        break;
      case 'slideUp':
        element.parent().slideUp(400, function() {
          element.unwrap('div');
        });
        break;
      default:
    } // switch
  })
}

var elems = ["option 1", "option 2", "option 3", "option 4", "option 5"];
showHide(elems, 2, "slideUp");
setTimeout(function() {
  showHide(elems, 2, "slideDown");
}, 500);
div {
  border: solid 1px #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="bfElementGroup" id="bfElementGroup4251">
    <input class="ff_elem" type="checkbox" name="ff_nm_whyapply[]" value="option 1" id="ff_elem4251">
    <label class="bfGroupLabel" id="bfGroupLabel4251" for="ff_elem4251">Option 1</label>
    <br>
    <input class="ff_elem" type="checkbox" name="ff_nm_whyapply[]" value="option 2" id="ff_elem4251_1">
    <label class="bfGroupLabel" id="bfGroupLabel4251_1" for="ff_elem4251_1">Option 2</label>
    <br>
    <input class="ff_elem" type="checkbox" name="ff_nm_whyapply[]" value="option 3" id="ff_elem4251_2">
    <label class="bfGroupLabel" id="bfGroupLabel4251_2" for="ff_elem4251_2">Option 3</label>
    <br>
    <input class="ff_elem" type="checkbox" name="ff_nm_whyapply[]" value="option 4" id="ff_elem4251_3">
    <label class="bfGroupLabel" id="bfGroupLabel4251_3" for="ff_elem4251_3">Option 4</label>
    <br>
    <input class="ff_elem" type="checkbox" name="ff_nm_whyapply[]" value="option 5" id="ff_elem4251_4">
    <label class="bfGroupLabel" id="bfGroupLabel4251_4" for="ff_elem4251_4">Option 5</label>
    <br>
</span>

0 个答案:

没有答案