valery_kz

Спасибо всем откликнувшимся, а в особенности Радику Алиеву. Вопрос решается, уже на финишной прямой, перепробована масса вариантов и способов. Сейчас остановился на CSS анимации, а с помощью JQ в нужный момент подменяю классы нужных блоков.
Если будут интересующиеся - выложу позже свой код. Еще раз всем спасибо !!!

var timerId = setTimeout(function bgSlider() {
		$("#bg_1").removeClass("bg_visible").addClass("bg_move");
		$("#bg_1").delay(5000)
			.queue(function() {
			$(this).removeClass("bg_move");
			$(this).addClass("bg");
			$(this).dequeue();
		});

Кусочек кода, но думаю должно быть понятно...

Спасибо всем за ответы. Сейчас делаю следующим образом:

$(document).ready(function() {		 
		  bgApproximation(); // эта функция делает приближение и замену фонов
		  slide1Description1(); //эта и две следующие функциии выводят текст с задержкой на первом фоне
		  slide1Description2();
		  slide1Description3();
		 
		    
		function bgApproximation() {
		    $("body")
		    .animate({ "background-size":"120%" }, 5000, function(){$("body").css({"background-image":"url(img/2.jpg)"})})
		    .animate({ "background-size":"100%" }, 0)
		    .animate({ "background-size":"100%" }, 5000, function(){$("body").css({"background-image":"url(img/3.jpg)"})})
		    .animate({ "background-size":"100%" }, 0)
		    .animate({ "background-size":"120%" }, 5000, function(){$("body").css({"background-image":"url(img/1.jpg)"})})
		    .animate({ "background-size":"100%" }, 0);
		    //.animate({ "background-size":"100%" }, 0, bgApproximation());
		}
		
		function slide1Description1() {
			$("#slide1Description1")
			.animate({opacity: 1.0}, 1000)
			.animate({opacity: 1.0}, 4000)
			.animate({opacity: 0.0}, 0);
		}
		
		function slide1Description2() {
			$("#slide1Description2")
			.animate({opacity: 0.0}, 1000)
			.animate({opacity: 1.0}, 1000)
			.animate({opacity: 1.0}, 3000)
			.animate({opacity: 0.0}, 0);
		}
		function slide1Description3() {
			$("#slide1Description3")
			.animate({opacity: 0.0}, 2000)
			.animate({opacity: 1.0}, 1000)
			.animate({opacity: 1.0}, 2000)
			.animate({opacity: 0.0}, 0);
		}
       
    });

Работает немного криво, и как правильно зациклить чтобы после третьего фона снова становился первый и далее по кругу? В функции bgApproximation() последняя закоментирванная строчка, насколько я понимаю так делать не правильно, а как правильно? Еще нужно приделать возможность посетителю самому переключать фон по нажатию на шарик, соответствующий нужному фону, как это приделать?