jQuery文字效果滑入

Question

This is the code i am working on Jsfiddle . There are three text in my code. All these texts are sliding from left to right. Right now my three text effects are there and they are animating on seperate lines but i want my second and third text on the same line. So third text instead of coming on different line it should be placed next to text 2 not on seperate line.

 <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>

Answer 1

updated Fiddle

IN HTML

 <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>

IN JS

$( 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);
}