Скрипт плавной смены background-image в div

[Nataly12]

Очень нужен скрипт скрипт плавной смены background-image в div.
Найти нигде не удалось.
Если кто-нибудь знает как это можно сделать(если это вообще возможно), огромная просьба помочь ))

[ksa]

Что есть "плавная смена"? Как она выглядит?

[Nataly12]

Самая обычная смена картинок(прозрачность плавно меняется)

[hfts_rider]

Вам нужно при клике или просто через время?
Через анимейт пробовали?

Пример:

$('.img').animate({'opacity':'0'},600,function(){
  $(this).css('background-image':'url(image2.jpg)');
  $(this).animate({'opacity':'1'},600);
});

[krasovsky]

Самая обычная смена картинок(прозрачность плавно меняется)

тебе слайдер нужен чтоль? С эффектом исчезания?
Советую просто погуглить jquery slider или jqyery carousel, наверняка найдется что то подходящее.
Например http://jquery.malsup.com/cycle/ там сразу демо с разными эффектами, в том числе и "затухания"

[Nataly12]

hfts_rider,
Просто через время. Спасибо, подскажите, пожалуйста,а как сделать смену нескольких картинок и прицепить этот код к диву?

krasovsky,Слайдер не подойдет у меня уже готова верстка и меняться должна именно фоновая картинка, а во всех слайдерах картинки картинками, а не фоном. Проблема в том , что я на джава скрипт умею делать только самые просты вещи. Это не заню как реализовать.

[hfts_rider]

(не забудь подключить jquery)

1) .csa-head = тот самый див с классом "csa-head"
2) imgHead = массив картинок, сюда впиши их расположение.
3) Где значения "200" это скорость появления и затухания.
4) Где значение "8000", это интервал через какой оно будет изменяться (8000 - это 8 секунд)

var imgHead = [
			'images/imgCsaHead/img.jpg',
			'images/imgCsaHead/img1.jpg',
			'images/imgCsaHead/img2.jpg',
			'images/imgCsaHead/img3.jpg'
		], i=1;
	function csaHead(){

		if(i > (imgHead.length-1)){
			$('.csa-head').animate({'opacity':'0'},200,function(){
				i=1;
				$('.csa-head').css({'background':'url('+imgHead[0]+')'});
			});
			$('.csa-head').animate({'opacity':'1'},200);
		}else{
			$('.csa-head').animate({'opacity':'0'},200,function(){
				$('.csa-head').css({'background':'url('+imgHead[i]+')'});
				i++;
			});
			$('.csa-head').animate({'opacity':'1'},200);
		}
		
	}
	var intervalCsaHead = setInterval(csaHead,8000);

[Nataly12]

hfts_rider,
Огромное-преогромное спасибо!!! Все получилось. Остался один вопрос, их можно остановить после первого круга? Т.е. все картинки прошли и на последней остановилась анимация.

[hfts_rider]

Нужно просто остановить таймер.

var imgHead = [
			'images/imgCsaHead/img.jpg',
			'images/imgCsaHead/img1.jpg',
			'images/imgCsaHead/img2.jpg',
			'images/imgCsaHead/img3.jpg'
		], i=1;
	function csaHead(){
		/* CSA head */
		if(i > (imgHead.length-1)){
			clearInterval(intervalCsaHead); // Остановка таймера
		}else{
			$('.csa-head').animate({'opacity':'0'},200,function(){
				$('.csa-head').css({'background':'url('+imgHead[i]+')'});
				i++;
			});
			$('.csa-head').animate({'opacity':'1'},200);
		}
		
	}
	var intervalCsaHead = setInterval(csaHead,8000);

[Nataly12]

hfts_rider,
Спасибо!!!!