javascript - Jquery Text Slide in Effect -
i want make text animation slide in left. there 3 text fields sports cargo bag $14 sale $25
i want these text set jquery , slide in left link . code jsfiddle, have set these headtext want use jquery method set these texts
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; }
here simplest method:
replace our current javascript in fiddle $("#maincontainer").hide().show('slide');
.
if want can use .delay(500)
make wait bit before animation: $("#maincontainer").hide().delay(500).show('slide');
Comments
Post a Comment