javascript - 将动画添加到显示/隐藏复选框

Question

我使用此 javascrpit 代码在选中特定复选框时显示/隐藏 div

$(function() {
 $('input[name=choice1]').on('click init-choice1', function() {
  $('#delivery').toggle($('#store').prop('checked'));
 }).trigger('init-choice1');
});

当选中 choice1 复选框时，如何向我的 delivery div 添加动画？

这是我在没有动画的情况下得到的结果的实际示例:https://jsfiddle.net/6h4u3a1b/

提前致谢， 〜昆汀

Answer 1

例如，您可以这样做:

$( document ).ready(function(){
  $(function() {
      $('input[name=choice1]').on('click init-choice1', function() {
          if ($('#store').prop('checked')) $('#delivery').fadeIn();
          else $('#delivery').fadeOut(); 
     }).trigger('init-choice1');
 });
})

或者简单地代替“如果...”:

$('#delivery').fadeToggle();

这会在开始时显示一点闪烁，因此您必须添加此样式规则来防止它:

.two { display: none }

用slideUp/slideDown替换fadeIn/fadeOut以获得不同的动画，我们使用jQuery的animate()函数来为你想要的任何CSS规则设置动画。