在JQuery条件形式中更改动画 - SlideUp和SlideDown JQuery替代方案

Question

请参阅codepen上的示例。我有一个使用JQuery和HTML的条件表单的工作模板，如果你更改下拉菜单，接下来出现的选项取决于前一个问题中的选择。似乎所有东西都在工作，但我似乎无法将slideUp / slideDown更改为更简单的动画。这不是一个大问题，我只是认为它看起来真的很讨厌，但我似乎无法得到任何其他工作相同我会非常感激，如果有人可以提供帮助，建议甚至只是指出我正确的方向所以我可以创建一个更平滑，更刺激的动画。

https://codepen.io/jamiestrong/pen/bLPmqG

(function($) {
$.fn.conditionize = function(options){ 

 var settings = $.extend({
    hideJS: true
}, options );

$.fn.showOrHide = function(listenTo, listenFor, $section) {
  if ($(listenTo).is('select, input[type=text]') && $(listenTo).val() == listenFor ) {
    $section.slideDown();
  }
  else if ($(listenTo + ":checked").val() == listenFor) {
    $section.slideDown();
  }
  else {
    $section.slideUp();
  }
} 

return this.each( function() {
  var listenTo = "[name=" + $(this).data('cond-option') + "]";
  var listenFor = $(this).data('cond-value');
  var $section = $(this);

  //Set up event listener
  $(listenTo).on('change', function() {
    $.fn.showOrHide(listenTo, listenFor, $section);
  });
  //If setting was chosen, hide everything first...
  if (settings.hideJS) {
    $(this).hide();
  }
  //Show based on current value on page load
  $.fn.showOrHide(listenTo, listenFor, $section);
});
}
 }(jQuery));

 $('.conditional').conditionize();

Answer 1

您可以使用缓动来平滑动画，对于不同的动画效果，请检查以下链接：Easing Jquery