Jquery文本动画

我正在将flash横幅转换为html5横幅。一切都很好，除了文本动画。文本应该是这样的但是我的文本工作得很好但是它越过了边界它应该像我的图像动画一样在边界内工作。这是我的代码http://jsfiddle.net/tU9LV/

<div id = "wrapper" >       
 <div id="mainContainer">
    <div>
 <img id="introImg" src="http://i.imgur.com/FClbHjn.png"/>
    </div>
    <div id="images">
        <p id="headline1Txt" >Striped Bag</p><br />
        <p id="headline2Txt" >$14</p><br />
        <p id="headline3Txt" >Sale $25</p><br />
    </div>
    <div id="ctaBtn">
      <button class="btn btn-primary" type="button">SHOP NOW</button>
    </div>
 </div>
</div>
     $(document).ready(function () {
bannerAnimation();
    });

function bannerAnimation(){
    //Jquery Animation
    $("#introImg").animate({ width: "120px",
        height: "140px"
    }, 1000);
    $("#headline1Txt").animate({ left: "20" }, 500, function () {
        $("#headline1Txt").animate({ left: "10" }, 200);
    });
    setTimeout(function () {
        $("#headline2Txt").animate({ left: "20" }, 500, function () {
            $("#headline3Txt").animate({ left: "20" }, 500, function () {
                $("#headline3Txt").animate({ left: "10" }, 200);
            });
            $("#headline2Txt").animate({ left: "10" }, 200);
        });
    }, 1000);
}* {
    margin:0;
    padding:0;
}

#wrapper {
    outline: 12px solid rgba(186,202,228 , 1);  
    width:285px;
    height:235px;
    position: absolute;
}
#mainContainer{
    background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
    width:285px;
    height:235px;
    overflow: hidden;
    position: fixed;

}
#introImg{
    position:absolute;
    top:80px;
    left:150px;
    right:100px;
    opacity: 100;
}

#ctaBtn{
    top:200px;
    left:15px;
    position:absolute;
}
#headline1Txt, #headline2Txt, #headline3Txt
{
      position:absolute;
       overflow: hidden;
    margin:60px 8px;
    left: -120px;

}
#headline2Txt, #headline3Txt
{
       font-size:21px;line-height: 2.0;
}
#headline1Txt
{
      font-size:26px;line-height: 1.5;
}