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

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

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

选中choice1复选框后，如何将动画添加到交付div中？

这是我没有动画的结果的实际例子：https://jsfiddle.net/6h4u3a1b/

提前致谢，
〜昆汀

最佳答案

您可以这样做，例如：

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

或代替“ if ...”简单地：

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

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

.two { display: none }

用slideUp / slideDown替换fadeIn / fadeOut为不同的动画，我们使用jQuery的animate（）函数为所需的CSS规则设置动画。