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');