title: Jquery Text Slider Loop
body: <p>I have been trying to create a text slider, where it fades and slides in and then fades and slides out. Then the next element comes and does the same thing.</p>
  
  <p>Manage to come up with this.</p>
  
  <p><a href="http://jsfiddle.net/3JKkj/6/" rel="nofollow">http://jsfiddle.net/3JKkj/6/</a></p>
  
  <pre><code>$(document).ready(function() {
       $('#heading1').css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);    
       $('#heading1').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);
  
       $('#heading2').css({opacity: 0}).delay(7000).animate({opacity: 1.0,left: "50px"}, 1000);
       $('#heading2').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);
  
       $('#heading3').css({opacity: 0}).delay(14000).animate({opacity: 1.0,left: "50px"}, 1000);
       $('#heading3').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);
  
       $('#heading4').css({opacity: 0}).delay(21000).animate({opacity: 1.0,left: "50px"}, 1000);
      $('#headings4').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000);
  
  })
  </code></pre>
  
  <p>Seems a bit trivial having those delays in there? Is there a more effective way and how can i loop this so it is constantly looping.</p>