Плавная смена Background-Image на JQuery
 

Всем привет!

У меня есть две фоновые картинки, которые меняют друг-друга через интервал времени. Как правильно оформить код чтобы они ПЛАВНО сменяли друг-друга, перетекая одна в другую?

Текущий код:

В JS:

(function(window){
	var n = 1;
	var name = ['block2_womans1.jpg', 'block2_womans2.jpg'];
	var $header;
	function changeImages() {
		if  ( n === name.length ) {n = 0;}
		$header.css('backgroundImage','url(./img/'+name[n]+')');
		n++;    
	}
	window.onload = function()  {
		$header = jQuery("#block2_womans")
		return interval = setInterval(function(){ changeImages(); }, 5000);
	};
})(window);

В HTML:

<div id="block2_womans"></div>

Мне крайне важно, чтобы элемент был один и у него просто менялся бы фон, плавно.

Заранее спасибо и доброго дня.

sitebuilder, как вариант: сделать два backgroundImage и менять с помощью backgroundPosition, но это уже будет не совсем то, что нужно. Если память не изменяет, то в Chrome через transition можно такое проворачивать. Но лучше вложить внутрь два дива и менять их прозрачность.

Столкнулся с тем же вопросом, Плавная смена бг
подскажите пожалуйста?