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

Jquery文本幻灯片的效果

1 个答案: