Jquery, Последовательное выполнение функций разных div в одном скрипте.
 

Идея простая. Есть блок, id=’animation_block’. В нем находятся четыре div-а, с display:none.
Эти блоки имеют id: im1, im2, im3, im4. В каждом своя текстура.
Я хочу, что бы они плавно появлялись и исчезали по очереди, и так по кругу.
Как я себе представляю код:

<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {

$('#im1').fadeIn(1000).fadeOut(400);

$('#im2').fadeIn(1000).fadeOut(400);

$('#im3').fadeIn(1000).fadeOut(400);

$('#im4').fadeIn(1000).fadeOut(400);

}, 0);
});
</script>

Но анимация происходит не последовательно, а вместе.
Знаю, как решить вопрос setTimeout, но хотелось бы без этого обойтись.

Помогите, пжлста!

Хотелось бы реализовать именно на jQuery, в JS полный чайник.

Пытался сделать с queue, бился несколько часов, безуспешно (queue могла помочь?).:cray:

какой кошмар :D

http://jsfiddle.net/kCSTS/

(function f() {
    f.idx = (f.idx || 0) + 1;
    if (f.idx<=4) { $('#im' + f.idx).fadeIn(1000).fadeOut(700,f); }
})();

js, но большое спасибо!
А как цикличность задать? С setInterval не получается.
И, все таки, можно реализовать на jQuery?

этот момент не заметил..

идея та же
http://jsfiddle.net/zGfpH/

(function f() {
    f.idx = (f.idx || 0) % 4 + 1;
    $('#im' + f.idx).fadeIn(1000).fadeOut(700,f);
})();