Hi,
you should give all elements to be faded a common css class, e.g. "fadeElements".
Then I see three solutions:
1.) no concatenation of animations:
- $('.fadeElements').each(function(index){
- $(this).delay(index*6000).fadeIn(3000).delay(1000).fadeOut(2000);
- });
- setTimeout(function(){
- window.location = …;
- }, 6000 * $('.fadeElements').length);
When your machine is very busy this solution might have tiny overlaps, but this should be no big deal.
2.) concatenate animations:
- var $imgs = $('.fadeElements'),
- index=0;
- function fadeNext() {
- var $next = $imgs.eq(index);
- if ($next.length) {
- index++;
- $next.fadeIn(3000).delay(1000).fadeOut(2000, fadeNext);
- } else {
- window.location = …;
- }
- }
- fadeNext();
This is a bit more code, but here you a safe to have no overlaps with animations.
3.) use jquery-timing plugin and concatenate animations with clean code:
- function redirect() {
- window.location = …;
- }
- $('.fadeElements').each($).fadeIn(3000).delay(1000).fadeOut(2000,$).all().then(redirect);
Have fun!
- creativecouple