Edit in JSFiddle

<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%;
}