mangasource mangasource - 21 days ago 11
Javascript Question

Add an animation to a Show/Hide Checked Box

I use this javascrpit code to show/hide a div when a specific checkbox is checked

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


How can I add an animation to my delivery div when the choice1 checkbox is checked ?

Here an actual exemple of what result I have without animation : https://jsfiddle.net/6h4u3a1b/

Thanks in advance,
~Quentin

Answer

You can do, for example:

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

or instead of the "if ..." simply:

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

This will show a little flicker at the beginnig so you youd have to add this style rule to prevent it:

.two { display: none }

Replace fadeIn/fadeOut with slideUp/slideDown for a different animation our use jQuery's animate() function to animate whatever CSS rule you want.

Comments