Fade in / Fade out message - help please

I have a checkbox in a form - if the checkbox is not ticked upon submit I want the fade in/fade out message to be shown.

The message div 'mydiv' is hidden and then shown if the checkbox is not ticked.

It shows the div but doesn't start fading...why?


Here is my function;

<script type="text/javascript" language="JavaScript">
<!--

//Check if it is ticked

function checkCheckBoxes() {
	if (document.form.agree.checked == false)
		{

//Not ticked, change 'mydiv' from hidden to block

		document.getElementById('mydiv').style.display = 'block';

//Start fade
 
 $(document).ready(function(){
   setTimeout(function(){
  $("div.mydiv").fadeOut("slow", function () {
  $("div.mydiv").remove();
      });
    
}, 2000);
 });

		return false;
		}
	else
		{

//Checkbox ticked

		return true;
		}
	}
//-->
</script>

Code (markup):

 

My suggestion is please use jQuery for great fade-in / out effect.
It is easy to use, such as

$('#here_is_my_div_id').fadeIn('slow');

Code (markup):

Plus you'll get lot of benefits by using jQuery