动画添加到一个显示/隐藏选中复选框

Question

我用这个JAVASCRPIT代码来显示/隐藏在一个特定的复选框被选中

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

我如何添加一个动画来我交付 DIV当一个div choice1复选框被选中？

这里我有什么结果，而不动画实际为例：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有点闪烁，所以你youd必须添加此样式规则，以防止它：

.two { display: none } 

更换淡入/淡出与效果基本show /了slideDown了不同的动画我们使用jQuery的动画（）函数动画你想要的任何CSS规则。

Answer 2

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

$(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'); 
 
}); 
 
}) \t

<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>