fadeIn div onhover, fadeIn other div on click

fadeIn div onhover, fadeIn other div on click

Hi,

I am diving into my first project using jquery. What I have is a series of 3 divs containing an image, underneath which is a div with text. On hover, the text divs fade over the images in turn. On click, the text divs toggle corresponding text divs into a div next to the image/text divs, replacing the text formerly toggled on. I would like the corresponding toggled text divs to fade in/out instead of toggle. (The top-left to bottom-right action is not as aesthetic as I would like.) Page is here: http://antijoey.damianj.com/index.html

Page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <title>Stephen Kingrea</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <link rel="stylesheet" href="css/main.css" type="text/css">
   <meta http-equiv="X-UA-Compatible" content="IE=6" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>


<script type="text/javascript">

$(document).ready(function(){
$("#under1text").fadeTo(0, 0.0); // Set the opacity of div to fade when the page loads(fadetime, opacity)
$("#under1text").hover(function(){
$(this).fadeTo(1000, 1.0); // Sets the opacity on hover(fadetime, opacity)
},function(){
$(this).fadeTo(1000, 0.0); // Sets the opacity back to original on mouseout(fadetime, opacity)

});

$("#under1text").click(function() {
$("#content1").toggle(1000);
$("#content2").css('display','none');
$("#content3").css('display','none');
});


$("#under2text").fadeTo(0, 0.0); // Set the opacity of div to fade when the page loads(fadetime, opacity)
$("#under2text").hover(function(){
$(this).fadeTo(1000, 1.0); // Sets the opacity on hover(fadetime, opacity)
},function(){
$(this).fadeTo(1000, 0.0); // Sets the opacity back to original on mouseout(fadetime, opacity)
});

$("#under2text").click(function() {
$("#content2").toggle(1000);
$("#content1").css('display','none');
$("#content3").css('display','none');

});

$("#under3text").fadeTo(0, 0.0); // Set the opacity of div to fade when the page loads(fadetime, opacity)
$("#under3text").hover(function(){
$(this).fadeTo(1000, 1.0); // Sets the opacity on hover(fadetime, opacity)
},function(){
$(this).fadeTo(1000, 0.0); // Sets the opacity back to original on mouseout(fadetime, opacity)
});

$("#under3text").click(function() {
$("#content3").toggle(1000);
$("#content1").css('display','none');
$("#content2").css('display','none');
});




});
</script>





</head>


<body id="body_home">
   <div id="container">
      <div id="sidebar">
      


      
      
<!--BEGIN INSERT1 -->      
         <div id="insert1">
            <div id="insert1text"><span class="title">&nbsp;professional</span></div>
            <a href="javascript:void(0);" id="insert1link">
            <div id="under1text">
            <ul>
               <li>creative website design</li>
               <li>content creation</li>
               <li>computer repair</li>
               <li>network administration</li>         
            </ul>
            </div>
            </a>
         
            <img id="sking2" style="background-color:none;" src="img/sidebar_proshot_v1.2.jpg" alt="Test AJ Image" title="Stephen Kingrea" border="0">
         </div>
<!--BEGIN INSERT2 -->
         <div id="insert2">
            <div id="insert2text"><span class="title">&nbsp;personal</span></div>
            <a href="javascript:void(0);" id="insert2link" target="_self">
            <div id="under2text">
            <ul>
               <li>biographical info</li>
               <li>books</li>
               <li>favorite things</li>
            </ul>
            </div>
            </a>
            <img id="sking2" src="img/sking2.jpg" alt="professional image" title="Professional Shot" border="0">
         </div>
         
<!--BEGIN INSERT3 -->      
         <div id="insert3">
            <div id="insert3text"><span class="title">&nbsp;et cetera</span></div>
            <a href="javascript:void(0);" id="insert3link" target="_self">
            <div id="under3text">
            <p>why is he the antijoey?<br /><br />
            just how does he preserve his youthful figure?<br /><br />
            is he <u>really</u> a jeffersonian libertarian or merely a strict constitutionalist?         
            </p>
            </div>
            </a>
            <img id="etcetera1" src="img/sking2.jpg" onmouseover="fade(this, 'out');" onmouseout="fade(this, 'in',100);" alt="et cetera image" title="Et Cetera Shot" border="0">
         </div>

<!--BEGIN NAVBAR -->

          <div id="navbar">
            <a href="index.html">home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="blog.html">blog</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="news.html">news</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="photos.html">photos</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="video.html">videos</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <a href="contact.html">contact</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
      </div>
<!--BEGIN CONTENT SECTION -->

        <div id="content">
         <span class="heading">stephen d. kingrea</span>
         <h1>home of the antijoey</h1>

<!--BEGIN CONTENT 1 SECTION -->
         <div id="content1">
            
              <h1>professional:</h1>
            <br />
            <ul class="regtext">
            <li>Exceptional knowledge of computer network systems, LAN/WAN topologies, wireless protocols and associated hardware and software requirements.</li>
            <li>Proficient in the use of many graphic, page layout, HTML editing and office suite applications.</li>
            <li>Skilled in the maintenance and repair of personal computers.</li>
            <li>Familiar with numerous scripting languages (Javascript, PERL, PHP, et al).</li>
            <li></li>
            <li></li>
            <li></li>
            </ul>
            
            <h2>Summary</h2>
            <p>What follows next is a greater narrative of what I have done recently, including links to projects, etc.</p>
            <h2>Projects</h2>
            <ul class="regtext">
            <li><a href="javascript:void(0)"
onclick="window.open('http://margarethollandinn.com')">Margaret Holland Inn</a>: Designed by Thor Goodrich, I optimized website for cross-browser compatibility, updated photographs, and wrote a simple password protected PHP script that enables the client to edit text on each section of the site.I currently maintain this site.</li>
            <li><a href="javascript:void(0)" onclick="window.open('http://portarinxandbambini.com')">Damian J Products, LLC</a>: Designed by the client, I have maintained this site since 2005, providing graphic design and support, photography, video production, and marketing.</li>
            <li><a href="javascript:void(0)" onclick="window.open('http://damianj.com')">DamianJ.com</a>: I have maintained this client -designed vanity site since 2008, providing graphic design and support, photography and video production.</li>
            <li><a href="javascript:void(0)" onclick="window.open('http://healinghands.bravehost.net')">Healing Hands Will Travel</a>: </li>
            <li>Link 5</li>
            <li>Link 6</li>
            <li>Link 7</li>
            </ul>
         </div>
         
<!--BEGIN CONTENT 2 SECTION -->
         
         <div id="content2">
         
              <h1>personal:</h1>
            <br />
            <p><b>Birthday:</b> March 28, 1958</p>
            <p><b>Music:</b></p>
            <p><b>Movies:</b></p>
            <p><b>Books:</b></p>
            <p><b>Books:</b></p>
            <p><b>Books:</b></p>
            
            
            
         </div>
         
<!--BEGIN CONTENT 3 SECTION -->

         
         <div id="content3">
         
              <h1>et cetera:</h1>
            <br />
            <p>More text about things not mentioned anywhere else.
              </p>

         </div>
      
        </div>
      <div id="footer">&copy;Copyright 2009, Stephen D. Kingrea</div>
   </div>


</body>
</html>


CSS:
@charset "UTF-8";
     /* CSS Document */
/*For antijoey.com/index.html*/
html {
            font-family: "Arial", "Helvetica", sans-serif;
}

#body_home, #body_blog,
#body_news, #body_photos,
#body_videos, #body_contact {
            background-color: #FFFFFF;
            background-position: 0px 0px;
            margin: 0px;
            padding: 0px;

}

#container {
   width: 1024px;
   height: 768px;
   background-color: #FFFFFF;
   text-align: center;
}

#sidebar {
   width: 270px;
   height: 744px;
   background-color: #32834D;
   margin: 12px;
   padding: 10px;
}

#sidebar p, ul {
   margin-top: 40px;
   margin-left: 18px;
   margin-right: 18px;
   font-size: 16px;
   font-weight: normal;
   color: #FFFFFF;
}

#sidebar a {
   margin-top: 0px;
   line-height: 18px;
}

#insert1 {
   width: 270px;
   height: 224px;
   background-color: #FFFFFF;
   border: 0px;
   text-align: left;

}

#insert1text {
   position: absolute;
   top: 22px;
   left: 22px;
   width: 270px;
   height: 36px;
   text-align: left;
   z-index: 20;
   /* for IE */
   filter:alpha(opacity=100);
   /* CSS3 standard */
   opacity:1.0;
}

#under1text {
   position: absolute;
   top: 22px;
   left: 22px;
   width: 270px;
   height: 224px;
   background-color: #666666;
   text-align: left;

}



#insert2 {
   width: 270px;
   height: 224px;
   background-color: #FFFFFF;
   border: 0px;
   margin-top: 10px;
   text-align: left;
   z-index: 10;
}

#insert2text {
   position: absolute;
   top: 256px;
   left: 22px;
   width: 270px;
   height: 36px;
   text-align: left;
   z-index: 20;
   /* for IE */
   filter:alpha(opacity=100);
   /* CSS3 standard */
   opacity:1.0;
}

#under2text {
   position: absolute;
   top: 256px;
   left: 22px;
   width: 270px;
   height: 224px;
   background-color: #BF644C;
   text-align: left;

}

#insert3 {
   width: 270px;
   height: 224px;
   background-color: #000000;
   border: 0px;
   margin-top: 10px;
   text-align: left;
   z-index: 10;
}

#insert3text {
   position: absolute;
   top: 490px;
   left: 22px;
   width: 270px;
   height: 36px;
   text-align: left;
   z-index: 20;
   /* for IE */
   filter:alpha(opacity=100);
   /* CSS3 standard */
   opacity:1.0;
}

#under3text {
   position: absolute;
   top: 490px;
   left: 22px;
   width: 270px;
   height: 224px;
   background-color: #000000;
   text-align: left;

}

#navbar {
   width: 980px;
   height: 40px;
   background-color: #000000;
   margin-top: 10px;
   text-align: right;
   color: #FFFFFF;
}

/* NAVBAR A TAG FORMATTING */

#navbar a, a:link, a:visited {
   color: #FFFFFF;
   font-size: 24px;
   font-weight: bold;
   text-decoration: none;
   line-height: 36px;
   border-style: none;
}

#navbar a:hover {
   color: #32834D;
   line-height: 36px;
   border-style: none;
}

#navbar a:active {
   color: #32834D;
   line-height: 36px;
   border-style: none;
}

#content {
   position: absolute;
   left: 314px;
   top: 12px;
   background-color: #FFFFFF;
   background-position: 0px 0px;
   width: 710px;
   height: 712px;
   margin: 0px;
   padding: 0px;
   text-align: left;
}

/* CONTENT A TAG FORMATTING */

#content a {
   color: #666666;
   border: none;
   font-weight: normal;
   line-height: 16px;
}

#content a:link, a:visited {
   font-size: 14px;
   font-weight: regular;
   color: #666666;
   text-decoration: none;
   border: none;
}

#content a:hover, a:active {
   color: #32834D;
   border: none;
   font-weight: normal;
}

#content li {
   margin: 6px;
}

#content .heading {
   font-size: 36px;
   font-weight: bold;
   line-height: 28px;
}

#content h1 {
   font-size:20px;
   line-height: 8px;   
}

#content p, .regtext, a.content, a:link {
   font-size: 14px;
   font-style: none;
   color: #000000;
}

#content ul {
   margin:0px;
}   


#content h2 {
   font-size:16px;
}

#content1 {
   position: absolute;
   display:none;
   left: 0px;
   top: 34px;
   background-color: #FFFFFF;
   background-position: 0px 0px;
   width: 688px;
   height: 672px;
   margin: 0px;
   padding: 0px;
   text-align: left;
}

#content1 h1{
   color:#666666;
   line-height:0px;
}

#content2 {
   position: absolute;
   display:none;
   left: 0px;
   top: 34px;
   background-color: #FFFFFF;
   background-position: 0px 0px;
   width: 688px;
   height: 672px;
   margin: 0px;
   padding: 0px;
   text-align: left;
}

#content2 h1 {
   color:#BF644C;
   line-height:0px;
}

#content3 {
   position: absolute;
   display:none;
   left: 0px;
   top: 34px;
   background-color: #FFFFFF;
   background-position: 0px 0px;
   width: 688px;
   height: 672px;
   margin: 0px;
   padding: 0px;
   text-align: left;
}

#content3 h1 {
   color:#BF644C;
   line-height:0px;
}

#insert1, #insert2, #insert3 .title {
   font-size: 24px;
   font-weight: bold;
   color: #FFFFFF;
   text-decoration: none;
}

#footer {
   position: absolute;
   margin-left: 320px;
   margin-top: -22px;
   background-color: #FFFFFF;
   font-size: 9px;
   font-weight: bold;
   text-align: center;
      
}



#layer1 {
   position: absolute;
   visibility: hidden;
   width: 400px;
   height: 300px;
   left: 20px;
   top: 300px;
   background-color: #ccc;
   border: 1px solid #000;
   padding: 10px;
}

#close {
   float: right;
}


I know that all this is probably more than anyone needs to see and right now everything is a mess, but I have tried a variety of things to no avail. Also, the jquery code itself (albeit close to what I am looking for) seems more than a bit clumsy. Is there a better way to do this? I got everything to work except the one effect.

Thanks in advance for all of the help, including the help I have gotten just browsing this forum!

AJ