0

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.

http://jsfiddle.net/3JKkj/6/

$(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.

4

1 に答える 1