Question

我想知道如何改进代码以及如何设置fadeIn/toggle的高度动画。单击复选框时，高度会出现抖动。我希望它是一个平滑的向上或向下滑动。我读到，生涩的动作是因为jquery不知道被褪色的元素的高度。我是在正确的轨道上吗？

mycode的：

jQuery('.checkbox').on('change', function() {

  window.globalCheckboxValue = CheckBoxSwitch(jQuery(this).val());
  jQuery('.checkbox').not(this).prop('checked', false);
});

function CheckBoxSwitch(choice) {
  var text = "";
  var $selectList = jQuery('.selecrWrapper');
  var $datepicker = jQuery('.datepicker');
  switch (parseInt(choice)) {
    case 1:
      text = "Pedagog";
      if (!$datepicker.is(':visible') && !$selectList.is(':visible')) {
   
 jQuery(".selecrWrapper").animate({ marginTop: "100px" }, 1000, function () {
                    $datepicker.fadeIn(1000);
                });


      }

      if (!$datepicker.is(':visible') && $selectList.is(':visible')) {
        $selectList.fadeToggle(600, function() {
          $datepicker.fadeIn(1000);
        });
      }
      break;
    case 2:
      text = "Arrendator";
      if (!$datepicker.is(':visible') && !$selectList.is(':visible')) {
        $datepicker.fadeIn(1000);

      }

      if (!$datepicker.is(':visible') && $selectList.is(':visible')) {
        $selectList.fadeToggle(600, function() {
          $datepicker.fadeIn(1000);
        });
      }

      break;
    case 3:
      text = "Program";
      if (!$selectList.is(':visible') && !$datepicker.is(':visible')) {
        $selectList.fadeIn(1000);

      }

      if ($datepicker.is(':visible') && !$selectList.is(':visible')) {
        $datepicker.fadeToggle(600, function() {
          $selectList.fadeIn(1000);
        });
      }
      break;
  }

  return text;
}

.calenderStyle {
  margin-top: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="displayPedagog">
  <span>
                        Pedagog:
                    </span>
  <input type="checkbox" class="checkbox" value="1" />
</div>
<div class="marginArr">
  <span>
                        Arrendator
                    </span>
  <input type="checkbox" class="checkbox" value="2" />
</div>
<div class="marginProg">
  <span>
                        Program
                    </span>
  <input type="checkbox" class="checkbox" value="3" />
</div>
</div>
<div class="slectanddateWrapper">
  <!-- DatePicker -->
  <div class="datepicker" style="display:none;">PlaceHolderDatePicker</div>
  <!-- DatePicker -->
  <!-- SelectList -->
  <div class="selecrWrapper" style="display:none;">
    <label class="selectLabelProgram">Välj det program du tillhör: </label>
    <select class="form-control selectProgram" id="selectList"></select>
  </div>
  <!-- SelectList -->
</div>
<div class="calenderStyle">
  <!-- calender -->
  <div id='calendar'>CalenderPlaceHolder</div>
  <!-- calender -->
</div>

Answer 1

高度差异正在发生，因为<select/>的高度高于<span/>。

您可以尝试使用slideUp()或slideDown()来实现更顺畅的过渡。

如果您更喜欢使用切换功能，则可以使用slideToggle()。

如何设置fadeIn＆amp;的高度切换＆amp;淡出

1 个答案: