ansaurus

Question

Answer 1

+2 A:

Assuming your talking about the checkbox labeled with id=cb1

$(document).ready(function() { 
  $("#cb1").click(function() { 
    if (this.checked) {
      $('#appear_div').fadeIn('slow'); 
    }
    else {
      $('#appear_div').fadeOut('slow'); 
    }
  }); 
});

if your talking about the other checkbox labeled with id=appear then use this

$(document).ready(function() { 
  $("#appear").click(function() { 
    if (this.checked) {
      $('#appear_div').fadeIn('slow'); 
    }
    else {
      $('#appear_div').fadeOut('slow'); 
    }
  }); 
});

John Hartsock 2010-06-17 20:15:23

`$(this).checked` should be just `this.checked`, it's not a jQuery property, but a direct DOM one.

Nick Craver 2010-06-17 20:29:31

good catch... Thanks Nick

John Hartsock 2010-06-17 20:36:55

Answer 2

+3 A:

$('#appear').click(function() {
    if(this.checked) {
        $('#appear_div').fadeIn();
    } else {
        $('#appear_div').fadeOut();
    }
});

I.devries 2010-06-17 20:15:34

Answer 3

A:

You can do the fading toggle like this:

$(function() {
  $('#appear').change(function() { 
    $('#appear_div').animate({opacity: this.checked ? 1 : 0}); 
  }).change();
});

You can see a demo here. If it's .checked, we .animate() the opacity to 1 (faded in), otherwise we change it to 0 (faded out), the last .change() call is to set the state properly when the page first loads. If you want to change the speed, to say 2 seconds, just add it as the next option:

$('#appear_div').animate({opacity: this.checked ? 1 : 0}, 2000);

Nick Craver 2010-06-17 20:28:49

Thanks Nick for the demo.

MANnDAaR 2010-06-17 20:39:09

ansaurus

tags:

views:

answers:

Need Improvement with this script

related questions