jquery with modx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{{head}}
<body class="home">
{{skip-links}}
<div class="page_margins">
  <div class="page">
    {{header}}
    {{main-nav}}
    
    <!-- begin: main content area #main -->
    <div id="main">

        <!-- begin: #col2 second float column -->
        <div id="col2">
            <div id="col2_content" class="clearfix">               
                {{news-box}}              
                {{eventsdebox}}
                {{articles-box}}
                {{success-box}}
            </div>
        </div>
        <!-- end: #col2 -->

        <!-- begin: #col3 static column -->
        <div id="col3">
            <div id="col3_content" class="clearfix">
                <div id="home">
                    <div id="home">
                        <p class="float_left"><a href="[~399~]">Text 1</a></p>
                    </div>
                    <div id="mhome">
                        <p class="float_right"><a href="[~5~]">Text 2</a></p>
                    </div>
                </div>
                {{teaser-box}}
        </div>
            <!-- IE column clearing -->
            <div id="ie_clearing"> </div>
        </div>                
        <!-- end: #col3 -->
    </div>
    <!-- end: #main -->
    
    {{footer}}
  </div>
</div>
<!-- full skiplink functionality in webkit browsers -->
<script src="assets/templates/ourtemplate/yaml/core/js/webkit-focusfix.js" type="text/javascript"></script>
</body>
</html>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<title>tintin</title>
<meta http-equiv="Content-Type" content="text/html; class=MsoNormal; charset=iso-8859-1"/> <style type="text/css"> 
<style type="text/css">

 
#tintin{
position: relative;


}
div
{
position: absolute;
display: none;

font-size:18pt;
font-weight:bold;
font-family: Calibri;
color:#fff;
}


a:link {
COLOR: #fff;
text-decoration: none; 
}


.image{
height:350px;
width: 855px;}


</style>
<script type="text/javascript"> 

$(document).ready(function () {
    var count = 0;
    animate();
    function animate() {
        $("div").eq(count).fadeIn(1000); //increase the 400 to make it slower
       count++;
        if(count < $("div").length) {
            setTimeout(animate, 1000);
        }
    };
});
</script>
</head>


<body>
<div id="tintin"> </div>

<div class="image" style="background-image:url('pic007s.jpg');">


<div style="left:25px; top:180px"><a href="http://www.w3schools.com/HTML/html_links.asp">Text 1</a> </div>
<div style="left:30px; top:80px">Text 2</div>
<div style="left:60px; top:30px">Text 3</div>

<div style="right:60px; top:30px">Text 4</div>
<div style="right:40px; top:80px">Text 5</div>
<div style="right:20px; top:180px">Text 6</div>

<div style="right:40px; top:250px">Text 7</div>
<div style="right:75px; top:300px">Text 8</div>

<div style="left:80px; top:300px">Text 9</div>
<div style="left:50px; top:250px">Text 10</div>

  
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript" href="path-to-jquery-file"></script>