Question

这是我正在处理Jsfiddle的代码。我的代码中有三个文本。所有这些文本都是从左向右滑动。现在我的三个文本效果在那里，他们在单独的行上动画，但我希望我的第二和第三个文本在同一行。因此，第三个文本而不是在不同的行上，它应该放在文本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>

Answer 1

updated Fiddle

在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);
}

Jquery文本效果滑入

1 个答案: