[JavaScript] jQuery - slider Opcje

[bahh]

Mam 6 divów o klasach .s, .s2, .s3, .s4, .s5, .s6

Wszystkie są display:none;

1. Przy załadowaniu strony, .s, .s2 są na display:block oraz dodawana jest im klasa animated bounceInLeft.
2. Po 5 sekundach, zmienia się im klasę na animated bounceOutLeft a po 0,8 sekundy .s3, .s4 są na display:block oraz dodawana jest im klasa animated bounceInLeft.
3. Po 10 sekundach, zmienia się im klasę na animated bounceOutLeft a po 0,8 sekundy .s5, .s6 są na display:block oraz dodawana jest im klasa animated bounceInLeft.

Teraz powinna być pętla, cały czas wykonywane są te trzy punkty. Mój kod:

[HTML] pobierz, plaintext 
window.onload = function() {
    var time = 3000;
    $('.s').css({'display':'block'}); 
    $('.s').addClass('animated bounceInLeft');
    setTimeout(function(){
      $('.s2').css({'display':'block'}); 
      $('.s2').addClass('animated bounceInLeft');  
    }, 300); 
 
    setTimeout(function(){
      $('.s').addClass('animated bounceOutLeft');
      setTimeout(function(){
        $('.s2').addClass('animated bounceOutLeft');
      }, 300); 
      setTimeout(function(){
        $('.s3').css({'display':'block'});
        $('.s3').removeClass('animated bounceOutLeft'); 
        $('.s3').addClass('animated bounceInLeft');
        setTimeout(function(){
          $('.s4').css({'display':'block'});
          $('.s4').removeClass('animated bounceOutLeft'); 
          $('.s4').addClass('animated bounceInLeft');
        }, 300);           
      }, 800);
    }, time);
 
    setTimeout(function(){
      $('.s3').addClass('animated bounceOutLeft');
      setTimeout(function(){
        $('.s4').addClass('animated bounceOutLeft');
      }, 300); 
      setTimeout(function(){
        $('.s5').css({'display':'block'}); 
        $('.s5').removeClass('animated bounceOutLeft');
        $('.s5').addClass('animated bounceInLeft');
        setTimeout(function(){
          $('.s6').css({'display':'block'}); 
          $('.s6').removeClass('animated bounceOutLeft');
          $('.s6').addClass('animated bounceInLeft');
        }, 300);           
      }, 800);
    }, 2*time); 
 
    setTimeout(function(){
      $('.s5').addClass('animated bounceOutLeft');
      setTimeout(function(){
        $('.s6').addClass('animated bounceOutLeft');
      }, 300); 
      setTimeout(function(){
        $('.s').css({'display':'block'});
        $('.s').removeClass('animated bounceOutLeft'); 
        $('.s').addClass('animated bounceInLeft');
        setTimeout(function(){
          $('.s2').css({'display':'block'});
          $('.s2').removeClass('animated bounceOutLeft');
          $('.s2').addClass('animated bounceInLeft');
        }, 300);           
      }, 800);
    }, 3*time);          
}
[HTML] pobierz, plaintext 

ale nie wiem jak ustawić powtarzanie się tego. Przy okazji, gdy wszystkie klasy dostaja addClass('animated bounceOutLeft'); musi być przed addClass('animated bounceInLeft'); zrobiony removeClass('animated bounceOutLeft'); żeby animacja zadziałała.

Ten post edytował bahh 10.11.2014, 12:21:04