效果中的 Jquery 文本幻灯片

Question

我想制作像这张从左边滑入的文字动画。共有三个文本字段 运动背包 14 美元 售价 25 美元

我希望从 jquery 设置这些文本并像这样从左侧滑入 link .这是我的代码JsFiddle，我已经设置了这些标题，但我想使用 jquery 方法来设置这些文本

html

 <div id="mainContainer">

    <div id="logdo">
     <img  src="http://i.share.pho.to/7346a9ca_o.gif"/>
    </div>
         <div id="images">
        <img id="introImg" src="http://i.share.pho.to/9064dfe4_o.jpeg"/></div>
    <div id="headlineText">
        <p id="headline1Txt" ></p>
        <p id="headline2Txt" ></p>
   <p id="headline3Txt" ></p>


    </div>

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

        </div>

css

* {
    margin:0;
    padding:0;

}



#mainContainer{ text-align: center;
width:160px;
    height:600px;
 box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
    border:5px solid #BACAE4;

    overflow: hidden;
    position: fixed;

}

#images{
    position:absolute;
    top:200px;
    left:3px;
    right:1286px;
    Width:130px;
    height:152px;

}
#introImg{
    position:absolute;
    top:40px;
    left:7px;
    right:11px;

}
#headlineText p
{
    text-align: center;
    position: absolute;
   top:60px;
    left:-120px; 
Width:120px;
    height:269px;
 line-height:1.0;
    overflow:hidden;

}

#ctaBtn{
        position:absolute;
    top:540px;
    left:26px;
    right:0px;
    Width:106px;
    height:28px;

}

Answer 1

这是最简单的方法：

用$("#mainContainer").hide().show('slide');替换我们现有的所有javascript。

如果你愿意，你可以使用.delay(500)让它在动画前稍等：$("#mainContainer").hide().delay(500).show('slide');