I am having some troubles; I want this line of text to fade in and out automatically when the page loads. But right now its not doing anything, is there something I am missing?

Here is my code, I was recently looking at previous stackoverflow posts that are similar to this topic, but I just can't get it to work.

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="js/jquery-1.6.3.min.js"></script>
<script src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script>
  $(document).ready(function()
  {
    function fade(element)
    {
      var op = 1;
      // initial opacity
      var timer = setInterval(function()
      {
        if (op <= 0.1)
        {
          clearInterval(timer);
          element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
      }, 50);
    }//closes function

  });
  //closes document.ready function
</script>
</head>
<body>
<div id="fade" style="background-color:#66FFFF;width:500px;
height:100px;text-align:center;">
  <br />
  "This text should fade in and out"
</div>
<br />
<br />
</body>

```