can't get animated text to show inside div
<p>I am almost where I need to be. I am trying to match this flash header <a href="http://www.abbingtonpartners.com/" rel="nofollow">here</a> using jquery. Here's what I have so far <a href="http://northshorewebdesign.net/jm-demo/index2.html" rel="nofollow">link to sample</a> the problem starts when I try to have the text slide in from the right. It ends up near the bottom of the document. I tried absolute and relative positioning in different combos but it didn't work. Here's my code:</p>

<pre><code>    // JavaScript Document
$(document).ready(function() {
    $("#wrap").css({
        'width':'900px',
        'margin':'0px auto', 
        'height':'150px', 
        'background':'#333',
        'overflow':'hidden'
        });
        // css for first text
    $("#text1").css({
        'position':'relative',
        'margin':'0px auto',
        'text-align':'center', 
        'color':'#fff', 
        'font-size':'140px',
        'top':'-120px', 
        'opacity':'0.5'
        });
        // animate first text
    $("#text1").animate({
        'top':'150px'           
        }, 3000, 'linear');

        // css for second text  
    $("#text2").css({
        'position':'relative',
        'margin':'0px auto',
        'text-align':'center', 
        'color':'#fff', 
        'font-size':'140px',
        'bottom':'-80px', 
        'opacity':'0.5'
        });
        // animate second text
    $("#text2").animate({
        'bottom':'330px'
        }, 3500, 'linear');

        // css for third text   
    $("#text3").css({
        'position':'relative',
        'margin':'0px auto',
        'text-align':'center', 
        'color':'#fff', 
        'font-size':'60px',
        'right':'0px', 
        });
        // animate third text
    $("#text3").animate({
        'right':'160px'         
        }, 3000, 'linear');

});
</code></pre>

<p>The id is text3. sorry i couldn't get the code to format correctly.</p>
