Javascript Jquery文本幻灯片生效

我想制作像这张幻灯片一样的文本动画。有三个文本字段 运动包 $14 售价25元

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

html

---

以下是最简单的方法：

用$mainContainer.hide.show'slide'；替换您的小提琴中的所有当前javascript

---

如果需要，可以使用.delay500使其在动画之前稍等片刻：$mainContainer.hide.delay500.show'slide'

您希望它什么时候滑入？在页面加载时，在单击时，在悬停时？在页面加载时，你能看到演示吗/你能看到这个吗？我想这样，但我想从jquery动态设置文本我已经更新了我的代码。我想从jquery方法中显示文本我已经使用了我自己的文本字段我想使用jquery设置headtext

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

* {
    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;

}