Показать сообщение отдельно
  #1 (permalink)  
Старый 09.04.2013, 12:37
Интересующийся
Отправить личное сообщение для phenom Посмотреть профиль Найти все сообщения от phenom
 
Регистрация: 26.10.2009
Сообщений: 18

Плавная смена background-image div-ва в котором есть контент
Каким образом можно сделать плавную смену фонового изображения (что то по типу затухание и появление)div-а, внутри которого есть различное содержимое (текст, блоки различные,вложенные превьюшки для картинок).Спасибо!
Фон меняю по обычному таким образом:
$(function(){
   // позиция на 1-й картинке
   var cur = 1;
   // если кликнули на превьюшку
   $(".movie_ext").click(function(){
        // получаем атрибут прьвьюшки
		cur = $(this).attr("movie-id");
		// ищем вложеный img и получаем у него путь к меленькой картирке
		var cur_backrg = $(this).children().children().attr("src");
		// формируем новый путь, при этом заменяем в пути small на big (название папок в которой лежат картинки большие и маленькие)
		cur_backrg = cur_backrg.replace("small", "big");
		// меняем фон
		// вот здесь хотелось бы что бы фон менялся как то плавно а не сразу
		// пробовал методы fadeIn/fadeOut но содержимое внутри класса main_image (текст,другие блоки) тоже анимируются...
		$('.main_image').css({'background-image': 'url(' + cur_backrg + ')', });
		
		// устанавливаем рамку для превьюшек
		$('div.movie_ext').each(function(i) {
		 if($(this).hasClass('selected')) 
			$(this).removeClass();
			$(this).addClass("movie_ext");
		});
		
		$(this).removeClass(".movie_ext");
		$(this).addClass(".movie_ext selected");
	});
	// смена фона по интервалу
	setInterval(function() {
		cur++;
		if(cur > $('.movie_ext').size())
			cur = 1;
			
		$('div.movie_ext').each(function(i) {
		 if($(this).hasClass('selected')) 
			$(this).removeClass();
			$(this).addClass("movie_ext");
		});
		$("div").find("[movie-id='" + cur + "']").addClass(".movie_ext selected");
		var segment_contr = "<?=$this->uri->segment(2)?>";
		$('.main_image').css({'background-image': 'url(/images/big/' + segment_contr + '/0' + cur + '.jpg)', });
	}, 5000); 
	// когда клацаем на плюсе для смена следующей картинки в прьевьюшке 
	$(".movie_ext_no_min").click(function(){
		cur--;
		if(cur <= 0)
			cur = $('.movie_ext').size();
		$('div.movie_ext').each(function(i) {
		 if($(this).hasClass('selected')) 
			$(this).removeClass();
			$(this).addClass("movie_ext");
		});
		$("div").find("[movie-id='" + cur + "']").addClass(".movie_ext selected");
		var segment_contr = "<?=$this->uri->segment(2)?>";
		$('.main_image').css({'background-image': 'url(/images/big/' + segment_contr + '/0' + cur + '.jpg)', });
	});
	// когда клацаем на плюсе для смена предыдущей картинки в прьевьюшке 
	$(".movie_ext_no_plus").click(function(){
		cur++;
		if(cur > $('.movie_ext').size())
			cur = 1;
		$('div.movie_ext').each(function(i) {
		 if($(this).hasClass('selected')) 
			$(this).removeClass();
			$(this).addClass("movie_ext");
		});
		$("div").find("[movie-id='" + cur + "']").addClass(".movie_ext selected");
		var segment_contr = "<?=$this->uri->segment(2)?>";
		$('.main_image').css({'background-image': 'url(/images/big/' + segment_contr + '/0' + cur + '.jpg)', });
	});

    
});
Ответить с цитированием