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');
 });
})

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

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

这会在beginnig上显示一点闪烁，所以你必须添加这个样式规则来阻止它：

.two { display: none }

使用slideUp / slideDown替换fadeIn / fadeOut以获得不同的动画，我们使用jQuery的animate（）函数为您想要的任何CSS规则制作动画。

Answer 2

这是我的解决方案：希望它有所帮助！

＆＃13;

$( document ).ready(function(){
 $("#delivery").hide();
  $(function() {
      $('input[name=choice1]').on('click init-choice1', function() {
          if ($('#store').prop('checked')) $('#delivery').fadeTo(100, 0.1).fadeTo(200, 1.0);
          else $('#delivery').fadeOut(); 
     }).trigger('init-choice1');
 });
})

＆＃13;

<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="one">
  <p>
    <input name="choice1" type="radio" id="download" checked  />
    <label for="download">Download</label>
  </p>
  <p>
    <input name="choice1" type="radio" id="store"  />
    <label for="store">Store</label>
  </p>
</div>
<div class="two" id="delivery">
  <p>
    <input name="choice2" type="radio" id="x"  />
    <label for="x">Add to X</label>
  </p>
  <p>
    <input name="choice2" type="radio" id="y"  />
    <label for="y">Add to Y</label>
  </p>
</div>

＆＃13;

将动画添加到“显示/隐藏选中的框”

2 个答案: