Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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)', });
	});

    
});
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2013, 14:28
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

прозрачность css-фона менять не представляется возможным. Сделайте подложку из элемента (position:absolute, z-index: -1, задайте ему фон и меняйте прозрачность элемента.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая смена картинок через заданное время herotic Элементы интерфейса 45 15.05.2020 17:44
плавная смена background MadChild Элементы интерфейса 7 22.02.2013 12:51
onclick по блоку в котором есть ссылки dr_gluk jQuery 2 17.11.2011 14:37
Js + moo tools плавная смена div mansoff Events/DOM/Window 1 03.02.2010 11:11
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37