# A partially overlapping sequence of jQuery animations

I know this is a mess! How can I write this code better?

function anim() {
$( "#p1-animation-1" ).fadeIn( 1200, function() {$( "#p1-animation-1" ).fadeOut( 1200 );
$( "#p1-animation-2" ).fadeIn( 1200, function() {$( "#p1-animation-2" ).fadeOut( 1200 );
$( "#p1-animation-3" ).fadeIn( 1200, function() {$( "#p1-animation-3" ).fadeOut( 1200 );
$( "#p1-animation-4" ).fadeIn( 1200, function() {$( "#p1-animation-4" ).fadeOut( 1200 );
$( "#p1-animation-5" ).fadeIn( 1200, function() {$( "#p1-animation-5" ).fadeOut( 1200 );
$( "#p1-animation-6" ).fadeIn( 1200, function() {$( "#p1-animation-6" ).fadeOut( 1200 );
anim();
});
});
});
});
});
});
}
anim();

• you need some kind of loop to do this – Paritosh Aug 12 '14 at 11:13
• See this jsfiddle might help you ,jsfiddle.net/uWGVN/2 – Paritosh Aug 12 '14 at 11:19

@Paritosh has suggested some code to change what you have done, but doesn't explain it at all.

The suggestion is that you use a loop

(function loop() {
$('.elements').each(function() { var$self = $(this);$self.parent().queue(function (n) {