mangasource mangasource - 1 year ago 85
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() {

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 :

Thanks in advance,

Answer Source

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(); 

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


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download