Плавное изминение фонового изображения

[AGENT131313]

Здравствуйте.
Прошу небольшой помощи, в общем цель: изминение фонового изображения в dive но оставлять неизменным все что в середине него (другие divы).

Вот откопал код:
$(function() {
var mainDiv = $("#main");
mainDiv.ready(function(){
mainDiv.animate({opacity:0}, 3000, "linear", function(){
mainDiv.css("backgroundImage","url('images/log_h2.png')");
mainDiv.animate({opacity:1}, 3000);
});
});
});

html
<div id="main">
<div>мое</div>
<div>мое</div>
</div>

css:
#main {
top:0px;
left:0px;
right:0px;
bottom:0px;
background-image: url('images/log_h1.png');
}

Проблема заключается в том, что оно меняет и содержимое моих других блоков. Подскажите как это отключить

 

[Compressor]

Попробовал вот так:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[AGENT131313]

Попробовал вот так:

Отлично, Спасибо.
А как сделать чтобы они по кругу ходили? и допустим добавить третью картинку в очередь?

 

[v0ff]

готовое решение

также есть на стак оверфлоу

либо просто , чтиобы никуда неходить, просто

сидаже прикрутить петлю, и по петле менять номерки... номерки массива это будут значения картинок...
одна функция а добавляеш только в список массивов картинки