jquery文字幻灯片效果

Question

我想从左侧制作像这张幻灯片一样的文字动画。有三个文本字段 体育货物袋 $ 14 售$ 25

我希望这些文字从jQuery的设置，并从左侧这样link 中滑动。这是我的代码JsFiddle，我已经设置这些headtext，但我想用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

这是最简单的方法：

用你的小提琴机智替换掉所有当前的javascript h $("#mainContainer").hide().show('slide');。

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