首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >更改JQuery条件表单中的动画- SlideUp和SlideDown JQuery替代方案

更改JQuery条件表单中的动画- SlideUp和SlideDown JQuery替代方案
EN

Stack Overflow用户
提问于 2018-03-06 19:49:19
回答 1查看 58关注 0票数 0

请参考codepen上的示例。我已经使用JQuery和HTML语言为我的条件表单创建了一个工作模板,如果您更改了下拉菜单,接下来出现的选项将取决于上一个问题中的选择。一切似乎都像我所希望的那样工作,但是我似乎不能将slideUp / slideDown更改为更简单的动画。这不是一个大问题,我只是觉得它看起来真的很糟糕,但我似乎不能让其他任何东西像我一样工作,如果有人能帮助我,建议甚至只是给我指出正确的方向,我会非常感激,这样我就可以创建一个更流畅,不那么烦人的动画。

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

代码语言:javascript
复制
(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();
EN

回答 1

Stack Overflow用户

发布于 2018-03-06 23:44:11

您可以使用缓动来获得平滑动画和不同的动画效果,请检查以下链接:Easing Jquery

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49130145

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档