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.
Manage to come up with this.
$(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);
})
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.