<div class="one sliding">There is some text here!</div> <br/> <div class="two sliding">There is some text here too!</div> <br/> <div class="three sliding">There is some text here three!</div> <br/> <div class="four sliding">There is some text here four omg!</div> <br/> <div class="five sliding">There is some text here five omg!</div> <br/> <div class="six sliding">There is some text here six omg!</div> <br/> <div class="seven sliding">There is some text here seven omg!</div>
$(document).ready(function(){ $(".one") .css('display', 'block') .animate({opacity: 1.0, left: '120px'}, 600); $(".two") .css('display', 'block') .delay(150).animate({opacity: 1.0, left: '120px'}, 600); $(".three") .css('display', 'block') .delay(300).animate({opacity: 1.0, left: '120px'}, 600); $(".four") .css('display', 'block') .delay(450).animate({opacity: 1.0, left: '120px'}, 600); $(".five") .css('display', 'block') .delay(700).animate({opacity: 1.0, left: '120px'}, 600); $(".six") .css('display', 'block') .delay(850).animate({opacity: 1.0, left: '120px'}, 600); $(".seven") .css('display', 'block') .delay(1000).animate({opacity: 1.0, left: '120px'}, 600); })
.sliding { display: none; opacity: 0.0; position: relative; margin-left: -120px; width: 100%; }