Плавное изменение бэкграунда

[Projeka]

Помогите пожалуйста, с синтаксисом JS знаком поверхностно.
пример http://www.thegomezfirm.com/
в примере это реализовано слайдером. Впихнуть слайдер в свой шаблон не получается.
Код примерно такой HTML

<div class="bg">
<p>info</p>
</div>

CSS:
.bg {
background-image: url (/img/bg3.jpg);
}

если

var images = ['/img/bg1.jpg', '/img/bg2.jpg', '/img/bg3.jpg'];
	var i = 0;
setInterval(function(){
            $('.bg').animate({opacity: 0}, 1000, function() {
                if (i >= images.length) {
                    i=0;
                }
                $('.bg').css('backgroundImage','url(' + images[i++] +') ').animate({opacity: 1},1000);
            });
        }, 8000);
        </script>

то пропадает "info"

Как сделать что бы была плавная смена бэкграунда, а "info" оставалось нетронутым ?

т.е. как понимаю надо

.animate({opacity: 1},1000);

использовать в отношении не всего класса .bg а только к свойству 'backgroundImage'
а как это написать не знаю.
Либо другим способом.

[danik.js]

как это написать не знаю

Никак. Плавно изменить background нельзя. Вроде только один браузер это умеет.
Делай подложку из div'а, задавай ему background, и меняй opacity всего div'а. Делай вторую подложку и меняй ее в обратном направлении.