Javascript Jquery文本效果滑入

这是我正在编写的代码。我的代码中有三个文本。所有这些文本都是从左向右滑动的。现在我的三个文本效果都在那里，它们分别在不同的行上设置动画，但我希望我的第二个和第三个文本在同一行上。因此，第三个文本不应出现在不同的行上，而应放在文本2的旁边，而不是单独的行上

 <div id="mainContainer">
 <div id="logo">
  <img id="Img1" src="http://i.share.pho.to/cc9794da_o.png" width="50px" height="50px"/>
 </div>
    <div id="images">
        <img id="introImg" src="http://i.share.pho.to/ebe3afc7_o.png"/>
    </div>

    <div id="headlineText">
        <p id="headline1Txt" >Vintage Lace Turquoise Dress</p>
        <p id="headline2Txt" >Sale rice:$135</p>
        <p id="headline3Txt" >Reg: $150</p>
    </div>
    <div id="ctaBtn">
      <button class="btn btn-primary" type="button">SHOP NOW</button>
    </div>

</div>

在HTML中

在HTML中

---

你能在这里查一下我的更新代码吗。我需要第三行，就像它出来一样，但在文本2之后，请检查此项并将您的html设置为这样

售价$21.99售价$21.99实际上在您的代码中，第二行和第三行文本都在一起，然后第三行文本向左，我不希望两个文本都在一起。应该是第二个文本出现，然后第三个文本出现，就像在我的代码中，它们没有出现在一起一样。你能在这里检查我更新的代码吗。我需要第三行，就像它出来一样，但在文本2之后，请检查此项并将您的html设置为这样

售价$21.99售价$21.99实际上在您的代码中，第二行和第三行文本都在一起，然后第三行文本向左，我不希望两个文本都在一起。应该是第二个文本出现，然后第三个文本出现，就像在我的代码中一样，它们不会在一起。

 <div id="mainContainer">

         <div id="logo">
        <img id="Img1" src="http://i.share.pho.to/cc9794da_o.png" width="50px" height="50px"/>
    </div>

         <div id="images">
        <img id="introImg" src="http://i.share.pho.to/ebe3afc7_o.png"/>
    </div>
    <div id="headlineText">
        <p id="headline1Txt" >Sports Cargo Bag</p><br />
        <p id="headline2Txt" >Sale Price $21.99     <span id="headline3Txt" >Reg: $150</span></p><br />



    </div>

    <button class="btn btn-primary" id="ctaBtn" type="button">SHOP NOW</button>

 </div>

$( document ).ready(function() {
bannerAnimation();
});
function bannerAnimation(){
    //Jquery Animation


    $("#headline1Txt").animate({ left: "320" }, 500, function () {
        $("#headline1Txt").animate({ 'marginLeft': "-=50" }, 200);

    });


    setTimeout(function () {
        $("#headline2Txt").animate({ left: "320" }, 500, function () {
            $("#headline3Txt").animate({ left: "30" }, 500, function () {
                $("#headline3Txt").animate({ left: "10" }, 200);
            });
            $("#headline2Txt").animate({ 'marginLeft': "-=50" }, 200);
        });
    }, 1000);
}