Changing Animation in JQuery Conditional Form - SlideUp and SlideDown JQuery alternatives

Question

Please see example on codepen. I've got a working template for my conditional forms using JQuery and HTML if you change the drop down menu the options that appear next depend on the selection made in the previous question. Everything seems to be working as I would hope however I just can't seem to change the slideUp / slideDown to a more plain animation. It isn't a huge issue, I just think it looks really nasty but I can't seem to get anything else to work the same I'd be really grateful if someone could help, advise even just point me in the right direction so that I can create a smoother less irritating animation.

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